A brief talk on JavaScript event cancellation and block bubbling _javascript techniques

Cancel Default Action

The method of the consortium is E.preventdefault (), ie is using E.returnvalue = false;

In browsers that support AddEventListener (), you can also cancel the default action for the time by calling the Preventdefault () method of the time object. However, in IE prior to IE9, you can achieve the same effect by setting the ReturnValue property of the event object to False. The following code assumes an event handler that uses all three of the cancellation techniques:

function Cancelhandler (event) {
  var event = Event | | window.event;  For IE
  if (event.preventdefault) Event.preventdefault ();  Standard technology
  if (event.returnvalue) Event.returnvalue = false;  IE return
  false;   handler for processing using object property registration

The current draft of the DOM event model defines the event object property defaultprevented.

return False

JavaScript return false only blocks the default behavior, but in jquery it prevents both default behavior and object bubbling.

The following use native JS, will only block the default behavior, will not stop bubbling

Copy Code code as follows:

<div id= ' div ' onclick= ' alert ("div"); ' >
<ul onclick= ' alert ("ul"); ' >
<li id= ' ul-a ' onclick= ' alert ("Li"); ' ><a href= "caibaojian.comhttp://caibaojian.com/" id= "Testb" >caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById ("Testb");
A.onclick = function () {
return false;
};

Block bubbling

The method of the consortium is e.stoppropagation (), ie is using e.cancelbubble = True

In browsers that support AddEventListener (), a stoppropagation () method of the event object can be invoked to block the continuation propagation of the event. If other handlers are defined on the same object, the remaining handlers will still be invoked, but the call to the Stoppropagation () method can be invoked at any time during event propagation, and it can work in the capture phase, the event target itself, and the bubbling phase.

IE does not support the Stoppropagation () method before IE9. Instead, the IE event object has a Canclebubble property, and setting this property to True can prevent the event from spreading further. (IE8 and previous versions do not support the capture phase of event propagation, so bubbling is the only event propagation to be canceled.) ）

The current draft of the DOM event specification defines another method on the event object named Stopimmediatepropagation (). Similar to Stoppropagation (), this method organizes event propagation for any other object, but also blocks calls to any other event handlers registered on the same object.

Copy Code code as follows:

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

Block bubbling

Copy Code code as follows:

function StopHandler (event)
Window.event?window.event.cancelbubble=true:event.stoppropagation ();
}

The above mentioned is the entire content of this article, I hope you can enjoy.