JavaScript stops bubbling and blocks browser default behavior

Event compatibility

function myfn(e){ var evt = e ? e:window.event; }

JS Stop bubbling

function myfn(e){window.event? window.event.cancelBubble = true : e.stopPropagation();}

JS block default behavior

function myfn(e){window.event? window.event.returnValue = false : e.preventDefault();}

Here is a detailed description of JavaScript stop bubbling and block default behavior

Prevent bubbling

The method is E.stoppropagation (), ie is using e.cancelbubble = True

Stoppropagation is also a method of event object that blocks the bubbling event of the target element, but does not block the default behavior. What is a bubbling event? If a button is bound to a "click" event, then the "click" event is triggered in turn in its parent element. Stoppropagation is the event that prevents the target element from bubbling to the parent element. Such as:

<div id=‘div‘ onclick=‘alert("div");‘><ul onclick=‘alert("ul");‘><li onclick=‘alert("li");‘>test</li></ul></div>

The above code, the demo is as follows, when we click Test, we will trigger alert ("Li"), Alert ("UL"), Alert ("div"), this is event bubbling.

• Test bubbling

Stop bubbling

window.event? window.event.cancelBubble = true : e.stopPropagation();

• Stop bubbling

Block default behavior

The method is E.preventdefault (), IE is the use of E.returnvalue = false;

Preventdefault It is a method of event object that cancels the default behavior of a target element. Since the default behavior is, of course, the element must have the default behavior to be canceled, and if the element itself has no default behavior, the invocation will of course be invalid. What elements have default behavior? such as link <a>, submit button <input type= "Submit" > etc. When the event object's cancelable is false, it means there is no default behavior, and even if there is a default behavior, calling Preventdefault will not work.

As we all know, the default action of link <a> is to jump to the specified page, as an example, block its jump:

//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>var a = document.getElementById("testA");a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue == false;}}

Demo: Prevent link jumps from default behavior

return False

The return false of JavaScript only blocks the default behavior, but uses jquery instead of blocking the default behavior and preventing the object from bubbling.

The following uses native JS, which only blocks the default behavior and does not stop bubbling

<div id=‘div‘  onclick=‘alert("div");‘><ul  onclick=‘alert("ul");‘><li id=‘ul-a‘ onclick=‘alert("li");‘><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li></ul></div>var a = document.getElementById("testB");a.onclick = function(){return false;};

Demo: Block link default behavior, no stop bubbling

• Caibaojian.com

The following is the use of jQuery, which prevents the default behavior and stops bubbling

<div id=‘div‘  onclick=‘alert("div");‘><ul  onclick=‘alert("ul");‘><li id=‘ul-a‘ onclick=‘alert("li");‘><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li></ul></div>$("#testC").on(‘click‘,function(){return false;});

Demo: Stop bubbling and block default behavior

Summarize how to use

When you need to stop bubbling behavior, you can use the

function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation )     //因此它支持W3C的stopPropagation()方法     e.stopPropagation(); else     //否则，我们需要使用IE的方式来取消事件冒泡     window.event.cancelBubble = true; }

When you need to block the default behavior, you can use the

//阻止浏览器的默认行为 function stopDefault( e ) {     //阻止默认浏览器动作(W3C)     if ( e && e.preventDefault )         e.preventDefault();     //IE中阻止函数器默认动作的方式     else         window.event.returnValue = false;     return false; }

Event attention Point

1. The event represents the state of the incident, such as the element that triggered the object, the position and state of the mouse, the key pressed, and so on;
2. The event object is only valid during the events.

Firefox in the event with the different in IE, IE is a global variable, ready to use, Firefox to use parameters to boot to be used, is a temporary variable at runtime.
In the Ie/opera is window.event, in Firefox is the event, while the object of the events, in IE is window.event.srcElement, in Firefox is Event.target,opera both are available.

1. The following two sentences have the same effect:

function a(e){var e = (e) ? e : ((window.event) ? window.event : null); var e = e || window.event; // firefox下window.event为null, IE下event为null}

JavaScript stops bubbling and blocks browser default behavior