Let's talk about how javascript events cancel and block bubbling, and talk about javascript

Let's talk about how javascript events cancel and block bubbling, and talk about javascript

Cancel default operation

The w3c method is e. preventDefault (), and IE uses e. returnValue = false;

In browsers that support addEventListener (), you can also call the preventDefault () method of the time object to cancel the default operation of the time. However, in IE before IE9, you can set the returnValue attribute of the event object to false to achieve the same effect. The following code assumes that an event handler uses all three cancellation techniques:

Function cancelHandler (event) {var event = event | window. event; // used for IE if (event. preventDefault) event. preventDefault (); // standard technology if (event. returnValue) event. returnValue = false; // IE return false; // the handler used to process registration using the object property}

The current DOM Event model draft defines the defaultPrevented attribute of the Event object.

Return false

The return false function of javascript only blocks the default behavior, but uses jQuery to both prevent the default behavior and prevent object bubbles.

The following native JS will only stop the default behavior and will not stop the bubble

Copy codeThe Code is as follows:
<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;
};

Prevents bubbles

W3c method is e. stopPropagation (), IE is to use e. cancelBubble = true

In a browser that supports addEventListener (), you can call a stopPropagation () method of the event object to prevent the event from spreading. If other handlers are defined on the same object, the remaining handlers will still be called, but the stopPropagation () method can be called at any time during event propagation, it can work in the capture phase, the event Target itself, and the bubble phase.

IE before IE9 does not support the stopPropagation () method. On the contrary, the IE event object has a cancleBubble attribute. setting this attribute to true can prevent further event propagation. (IE8 and earlier versions do not support the capture phase of event propagation, so bubbling is the only event propagation to be canceled .)

The current DOM Event specification draft defines another method on the Event object, named stopImmediatePropagation (). Similar to stopPropagation (), this method organizes event propagation of any other object, but also prevents calls of any other event handler registered on the same object.

Copy codeThe Code is as follows:
<Div id = 'div 'onclick = 'alert ("div"); '>
<Ul onclick = 'alert ("ul"); '>
<Li onclick = 'alert ("li"); '> test </li>
</Ul>
</Div>

Prevents bubbles

Copy codeThe Code is as follows:
Function stopHandler (event)
Window. event? Window. event. cancelBubble = true: event. stopPropagation ();
}

The above is all the content of this article. I hope you will like it.