javascript - 为什么按钮上的事件在父元素上的事件之后触发？

Question

简介

我正在使用自己的按钮和模式对话框扩展 Photoswipe，类似于内置的共享对话框。

我已经编写了有效的代码，但随后对 photoswipe 进行了以下修改: https://github.com/dimsemenov/PhotoSwipe/issues/1209

现在它不再起作用了。问题是 photoswipe 的事件处理程序在我的事件处理程序之前被调用，因此看起来好像用户单击了 photoswipe 控件，而 photoswipe 隐藏了图像、控件和所有内容，只有我的模式可见。

诊断

我修改了 onControlsTap 和 onGlobalTap 并且我的按钮单击登录到控制台，我看到它们按以下顺序触发:

onControlsTap
onGlobalTap
Settings button click

另一方面，Html 看起来像这样:

<div id="globalTapContainer">
  <div id="controlTapContainer">
    <button id="myButton"></button>
  </div>
</div>

并且事件是使用addEventListener(..., false)

注册的

代码

这是我绑定(bind)到点击事件的代码

  $("#pswp__settings__dropdown_background, .pswp__button--settings")
    .click(function(ev) {
        console.log('Settings button click');
        ev.stopPropagation();
        toggleSettings();
  });

这是绑定(bind)事件的 photowipe 代码。

  _controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
  // ...
  framework.bind(_controls, 'pswpTap click', _onControlsTap);
  framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);

var framework = {
    // ...
    bind: function(target, type, listener, unbind) {
        var methodName = (unbind ? 'remove' : 'add') + 'EventListener';
        type = type.split(' ');
        for(var i = 0; i < type.length; i++) {
            if(type[i]) {
                target[methodName]( type[i], listener, false);
            }
        }
    }
}

我的按钮和模态框是 pswp__ui 的子节点之一。

问题

当我将点击事件注册到特定按钮时，他们的事件怎么可能在我的事件之前被调用？

如何才能在单击我的控件时不触发 Photoswipe 事件？

Answer 1

我不熟悉 photoswipe，但它的事件使用名为 pswpTap 的自定义事件，而不是 click。据推测，当点击元素或按下鼠标按钮时会触发此事件。 click 事件在释放鼠标按钮之前不会触发，因此这可以解释为什么它们的事件在您的事件之前触发。

示例:

$('#outerdiv').on('mousedown', function() {
  console.log('outer mousedown');
});

$('#innerdiv').on('click', function() {
  console.log('inner click');
});

#outerdiv {
  width: 100px;
  height: 100px;
  background-color: blue;
}

#innerdiv {
  width: 40px;
  height: 40px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerdiv">
  <div id="innerdiv"></div>
</div>

您应该能够通过元素句柄并取消 mousedown 事件来防止这种情况。如果点击事件的工作方式与 mousedown 不同(我不确定它们是否不同)，您可能还需要为点击事件添加事件处理程序。

$('#outerdiv').on('mousedown', function() {
  console.log('outer mousedown');
});

$('#innerdiv').on('mousedown', function(event) {
  console.log('inner mousedown');
  event.stopPropagation();
});

$('#innerdiv').on('click', function() {
  console.log('inner click');
});

#outerdiv {
  width: 100px;
  height: 100px;
  background-color: blue;
}

#innerdiv {
  width: 40px;
  height: 40px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerdiv">
  <div id="innerdiv"></div>
</div>