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

Question

简介

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

我已经制作了有效的代码，但随后对照片进行了这些修改： 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)

注册事件

代码

这是我的代码，它绑定到click事件

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

这是绑定事件的照片代码。

  _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>