A brief discussion on javascript event cancellation and preventing bubbling

Cancel the default operation

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

In support of addEventListener() In the browser, you can also cancel the default operation of time by calling the preventDefault() method of the time object. However, in IE before IE9, the same effect can be achieved by setting the returnValue property of the event object to false. The following code assumes an event handler that uses all three cancellation techniques:

function cancelHandler(event){
  var event = event || window.event;  //用于IE
  if(event.preventDefault) event.preventDefault();  //标准技术
  if(event.returnValue) event.returnValue = false;  //IE
  return false;   //用于处理使用对象属性注册的处理程序
}

The current draft DOM event model defines the Event object property defaultPrevented.

return false

javascript's return false will only prevent the default behavior, but using jQuery will both prevent the default behavior and prevent the object from bubbling.

The code is as follows:

var a = document.getElementById("testB");
　　a.onclick = function(){
　　return false;
};

To prevent bubbling

w3c’s method is e.stopPropagation( ), IE uses e.cancelBubble = true

In browsers that support addEventListener(), you can call a stopPropagation() method of the event object to prevent the event from continuing to propagate. If other handlers are defined on the same object, the remaining handlers will still be called, but calling 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 risk bubble stage.

IE before IE9 does not support the stopPropagation() method. In contrast, the IE event object has a cancleBubble property. Setting this property to true prevents the event from propagating further. (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 (). Like stopPropagation(), this method prevents event propagation from any other object, but also prevents any other event handlers registered on the same object from being called.

The code is as follows:

function stopHandler(event)
    window.event?window.event.cancelBubble=true:event.stopPropagation();
}

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

For more related tutorials, please visit JavaScript Video Tutorial