JS if event bubbling and browser default events are blocked

Original address: http://missra.com/article/web-57.html

Nested tag elements that, if both parent and child elements are bound to events, may trigger the event of a parent element when the inner child element is clicked, and the JavaScript block default event and JavaScript block event Bubbling example are described below.

(1) Block bubbling events

Note: Nested elements typically have bubbling events that can have some impact

Outermost tags: outer, middle Layer Label: center, the most inner label: inner, and in outer, center, inner have added the Alert Bullet box event, in the normal thinking situation if only click on the inner element, will only pop up the alert event bound to the element, However, because of the bubbling event, if only the inner element is clicked to trigger the event of the clicked inner element first, then the outer (to the ancestor) event is bubbled up in turn, as follows:

Outercenterinner

Html:

12345

<div id="outer" onclick="alert(‘Outer‘);">outer    <div id="center" onclick="alert(‘Center‘);">center        <div id="inner" onclick="alert(‘Inner‘);">inner</div>    </div></div>

Css:

1234567891011121314151617181920

#outer {    width:300px;    border:1px solid #888;    text-align:center;    backgrond-color:#888;    margin:0 auto;}#center {    margin:20px;    border:1px solid #aaa;    text-align:center;    backgrond-color:#aaa;}#inner {    margin:20px;    border:1px solid #ccc;    text-align:center;    text-align:center;    backgrond-color:#ccc;}

Imagine if in the project development, a button and his parent are bound to a very important event, then the result will be miserable, then the treatment is to stop the bubbling event, with the following JS to prevent the occurrence of bubbling events.

JS Code:

1234567891011121314151617181920212223242526272829

var outerDom = document.getElementById("outer");var centerDom = document.getElementById("center");var innerDom = document.getElementById("inner");//阻止冒泡事件function stopBubble(e) {if (e && e.stopPropagation) {e.stopPropagation();    } else {window.event.cancelBubble = true;    }//等价语句//window.event ? e.stopPropagation() : window.event.cancelBubble = false;}//为每个元素对象添加监听事件，如果监听到元素触发"click"事件，就引用上面阻止冒泡的方法stopBubble()来阻止冒泡事件的发生outerDom.addEventListener("click",function(e) {stopBubble(e);})//阻止outer冒泡centerDom.addEventListener("click",function(e) {stopBubble(e);})//阻止center冒泡innerDom.addEventListener("click",function(e) {stopBubble(e);})//阻止inner冒泡

Use the above JS code to prevent the bubbling event after the effect is as follows:

Outercenterinner

(2) Block default events

In the front-end development work, due to browser compatibility and other issues and some special use, such as Prohibit browser right-click, prohibit browser menu, etc., need to block the browser's default events

Example: Blocking a hyperlink

Link below

Http://www.missra.com

Block Open link This default event, JS code is as follows

12345678910111213

var aDom = window.document.getElementById("a");aDom.onclick = function (e) {    //如果提供了事件对象，则这是一个非IE浏览器    if (e && e.preventDefault) {        //阻止默认浏览器动作(W3C)         e.preventDefault();    }    else {        //IE中阻止函数器默认动作的方式         window.event.returnValue = false;        return false;    }}

After using the JS script above, the effect is as follows:

Http://www.missra.com

Clicking on the link will normally occur when jumping, but now we have blocked its default event, that is, jump event, then will not jump to the Rose (note: Because the site editor is not able to add an ID to the link, so the demo link can be opened).

(3) Jqeury block default and bubbling events

Note: The "a" in the code is the element tag, which can be "#id" or ". Class" or DOM object

Block bubbling Events

123	$("a").click(function (e) {    e.stopPropagation();});

Block Default Events

123	$("a").click(function (e) {    e.preventDefault();});

Block default and bubbling events

123	$("a").click(function (e) {    return false;});

JS if event bubbling and browser default events are blocked