javascript - 执行另一个函数时如何防止执行自定义函数

Question

这是我的情况:

我的项目有一个鼠标右键单击的自定义菜单。在这里，我点击了 document.addEventListener，这使得这个菜单不可见，如下所示:

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

它很棒，运行良好，但我正在实现一个下拉子菜单，当您单击某个元素时应该打开该菜单，如下所示:

 $('#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();
});