別の関数が実行されているときにカスタム関数の実行を防ぐ方法

Question

ここに私の状況です：

私は自分のプロジェクトで右クリックしてカスタムメニューを持っています。

var i = document.getElementById("menu").style; 
document.addEventListener('click', function(e) { 
    i.opacity = "0"; 
    setTimeout(function() { 
     i.visibility = "hidden"; 
    }, 100); 
}, false); 

そして、それは素晴らしいことだ、うまく動作しますが、あなたが特定の要素をクリックしたとき、私は開くべきドロップダウンサブメニューを実装している：ここで、私はクリックでdocument.addEventListenerが持っている、それはこのように、このメニューが見えなくなります、そのよう：

$('#change_color').click(function(){ 
     if($('#back_color').hasClass('back_color')){ 
      $('#back_color').removeClass('back_color') 
     }else{ 
      $('#back_color').addClass('back_color') 
     } 
}) 

事は、私がその#change_colorをクリックしたときにaddEventListenerは明白である、発射されていることです。

質問は - #change_colorをクリックしたときにそのリスナー機能が実行されないようにするにはどうすればよいですか？

Answer 1

event.stopPropagation()を使用してキャプチャフェーズとバブリングフェーズで現在のイベントがさらに伝播するのを防ぐことができます。コードの簡略化のために、jQuery.toggleClass()を使用してください。

コード例：МаркЧолак@

$('#change_color').click(function (e) { 
    $('#back_color').toggleClass('back_color'); 
    e.preventDefault(); 
    e.stopPropagation(); 
});