Home > Web Front-end > JS Tutorial > JavaScript prevents event bubbling example sharing_javascript skills

JavaScript prevents event bubbling example sharing_javascript skills

WBOY
Release: 2016-05-16 16:24:11
Original
1070 people have browsed it

I encountered the problem of event bubbling before, and I searched online. Most of the results were the same code, and it was not smooth when I posted it. When it comes to FF, you can use e.stopPropagation(); , which I somehow didn't succeed with. However, I found that FF supports the writing method of e.cancelBubble = true;, which is feasible after testing. Just post the code here to save you looking for it later. The compatibility of previous versions of IE has not been tested yet. It will be improved when used.

Copy code The code is as follows:

//Cancel event bubbling
function stopBubble(e) {
var evt = (e) ? e : window.event;//Compatible with FF
evt.cancelBubble = true; //evt.stopPropagation(); To prevent bubbling in FF, it is said that you can use
};

Also:

1. cancelBubble (HTML DOM Event object attribute): If the event handler wants to prevent the event from propagating to the containing object, this attribute must be set to true.

2. stopPropagation (HTML DOM Event object method): The termination event is further propagated in the capture, target processing or bubbling stage of the propagation process. After calling this method, the handler for the event on this node will be called, and the event will no longer be dispatched to other nodes.

3. preventDefault (HTML DOM Event object method) notifies the browser not to perform the default action associated with the event.

Example:
Function stopBubble(e)

If (e && e.stopPropagation)
e.stopPropagation()
        else
               window.event.cancelBubble=true
}  

Put this stopBubble(e) function into the function you want to prevent event bubbling to prevent event bubbling

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template