stopPropagation() works wired on event delegation #718

Closed
chrisyip opened this Issue Mar 11, 2013 · 3 comments

4 participants

@chrisyip

Example: http://jsbin.com/ugadap/6/edit

Problems:

When A.2 is clicked, click events will be fired on two divs, both A.1 and A.2 are in pink. The stopPropagation() doesn't take any effects.

When A.1 is clicked, click event that should only be fired on A.2 is fired, A.1 should in red not pink.

The behavior in box B are the correct one: event is stopped correctly, fired on correct element.

@mislav mislav was assigned Nov 24, 2013
@madrobby
Owner

I'm not sure what doesn't work, as the tests don't include information about what the expected behavior is. I'm closing this, but will reopen if there's a better description.

@madrobby madrobby closed this Nov 24, 2013
@chrisyip

@madrobby Sorry. I updated the description. My English is so poor, I'm not sure if I made it clear enough. If you take a look at the example, you will understand the difference between Zepto and jQuery.

@releasethecow
releasethecow commented Apr 18, 2016 edited

it is because zepto use delegate for the on() function. see as below source code of zepto.js(Zepto v1.1.6 as sample):
line:194

  function parse(event) {
    var parts = **('' + event).split('.')**
    return {e: parts[0], ns: parts.slice(1).sort().join(' ')}
  }

line 1056:

$.fn.on = function(event, selector, data, callback, one){
      ...
      add(element, event, callback, data, selector, delegator || autoRemove)
      ...
  }

line 932:

function add(element, events, fn, data, selector, delegator, capture){
      ...
      var handler   = parse(event)
      ...
}

that's why we face the "Wrong" event object when we use zepto to register events' callback, and try to use "stopPropagation()" with an parsed event object.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment