How to prevent JS bubbling and browser default behavior

This time I will show you how to prevent the bubbling of JS and the default behavior of the browser. What are the precautions? The following is a practical case. Let’s take a look.

Event compatibility:

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

js stops event bubbling

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

jsPrevent default behavior

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

The following are detailed instructions on

JavaScriptstop bubbling and prevent default behavior

Prevent bubbling

w3c The method is e.stopPropagation(), and IE uses e.cancelBubble = true

stopPropagation is also a method of the event object (Event). Its function is to prevent the bubbling event of the target element, but it will not prevent the default behavior. . What is a bubbling event? If a "click" event is bound to a button, the "click" event will be triggered in its parent element in turn. stopPropagation prevents events from the target element from bubbling up to the parent element. For example:

<div id=&#39;div&#39; onclick=&#39;alert("div");&#39;>
<ul onclick=&#39;alert("ul");&#39;>
<li onclick=&#39;alert("li");&#39;>test</li>
</ul>
</div>

The above code, Demo is as follows. When we click test, alert("li"), alert("ul"), alert("div") will be triggered in sequence. This is the event risk. Bubble.

Prevent bubbling

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

Prevent default behavior

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

preventDefault It is a method of the event object (Event), and its function is to cancel the default behavior of a target element. Since we are talking about default behavior, of course the element must have a default behavior before it can be canceled. If the element itself does not have a default behavior, the call will of course be invalid. What elements have default behaviors? Such as link , submit button , etc. When the event object's cancelable is false, it means that there is no default behavior. Even if there is a default behavior, calling preventDefault will not work.

We all know that the default action of the link is to jump to the specified page. Let’s take it as an example to prevent it from jumping:

//假定有链接<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;
}
}

return false

The return false of javascript will only prevent the default behavior, but using jQuery will both prevent the default behavior and prevent the object from bubbling

The following uses native js, which will only prevent the default behavior and will not stop bubbling. Bubble

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

The following is using jQuery to both prevent the default behavior and stop bubbling

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

Summary of usage

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

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

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

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

Event attention points

event represents the status of the event, such as the element that triggers the event object, the position and status of the mouse, the button keys, etc.;

event object is only valid during the event.

The events in firefox are different from those in IE. The events in IE are global variables and can be used at any time; the events in firefox can only be used when guided by parameters, and they are temporary variables at runtime.

In IE/Opera it is window.event, in Firefox it is event; and the object of the event is window.event.srcElement in IE, in Firefox it is event.target, both are available in Opera.

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The API that jQuery must master

aja’s asynchronous upload plug-in

jQuery implements form verification after multi-layer verification

The above is the detailed content of How to prevent JS bubbling and browser default behavior. For more information, please follow other related articles on the PHP Chinese website!