防止来自子元素的事件默认值

Question

How to prevent parent event if child's event is executed. Here is the code see the comments

document.addEventListener('touchend', function (e) { 
    //Do something here
}, false);

someChildElement.addEventListener('touchend', function (e) { 
    //Do something here

    //if this code block is executed then do-not execute the touchend event of document//
}, false);

Answer 1

You can try this in your child event handler

event.stopPropagation()

For Internet Explorer, you should use

window.event.cancelBubble = true

Answer 2

Have you tried changing the event propagation mechanism?

The last parameter in the 'addEventListener' method controls the propagation of event. If we set it to false, the event bubbles but if we set it to true, the event is captured and then it bubbles up. So when we set it to 'true', the "container" receives the event before the "child" and when we set it to 'false', the child receives the event ahead of the container. In simple words, when we set the parameter to 'false', the event registrar starts from inner element as the event bubbles from 'child' element to its container element. And when we set it to 'true', the event registrar first travel downwards to the container element as it is the first element to which the event is registered, traversing the document tree from outermost element and then it reaches to the child element.

And then you can use event.stopPropagation to stop event from traversing further.

You can learn more about it here on MDN

Answer 3

Use

preventdefault(event) function.

http://api.jquery.com/category/events/event-object/