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

Question

Intro

I am extending photoswipe with my own button & modal dialog, similar to built in share dialog.

I already made code that worked, but then followed these modifications to photoswipe: https://github.com/dimsemenov/PhotoSwipe/issues/1209

Now it doesn't work anymore. Issue is that photoswipe's event handlers get called before mine, so it appears as if user clicked on photoswipe controls and photoswipe hides image, controls & everything and only my modal is visible.

Diagnostics

I have modified onControlsTap and onGlobalTap and my button click to log to console and I see they are fired in this order:

onControlsTap
onGlobalTap
Settings button click

Html on the other hand looks like this:

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

And events are registered using addEventListener(..., false)

Code

This is my code which binds to click event

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

This is photoswipe code that binds events.

  _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);
            }
        }
    }
}

My button and modal are one of child nodes of pswp__ui .

Question

How is it possible that their events are called before mine when I have registered click event to a specific button?

What to do to make photoswipe events not fire when you click on my controls?

Answer 1

I'm not familiar with photoswipe, but its events use a custom event called pswpTap , not click . Presumably this fires when an element is tapped or when the mouse button is pressed. click events don't fire until the mouse button is released, so that would explain why their events are firing before yours.

Example:

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

You should presumably be able to prevent this by having your element handle and cancel the mousedown event. You may also need to add an event handler for tap events if they work differently from mousedown (I'm not sure whether they are).

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