为什么我的事件在事件上在父母元素上发射

Question

into

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

我已经制作了有效的代码，但随后遵循这些修改来进行照片处理：https://github.com/dimsemenov/photoswipe/issues/1209

现在它不再起作用了。问题是Photoswipe的事件处理程序在我的之前就被调用了，因此似乎用户单击Photoswipe控件和Photowipe HIDES Image，Controls＆amp;一切，只有我的模态是可见的。

诊断

我已经修改了onControlsTap和onGlobalTap，然后单击我的按钮登录到控制台，我看到它们按以下顺序发射：

onControlsTap
onGlobalTap
Settings button click

另一方面，

html看起来像：

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

使用addEventListener(..., false)

注册事件

代码

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

  $("#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的子节点之一。

问题

当我注册到特定按钮时，如何在我的事件之前调用他们的事件？

单击我的控件时，该怎么做才能使照片清洁事件不是发射？

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不同(我不确定它们是(，则可能需要为TAP事件添加一个事件处理程序。

。

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