How to stop bubbling and prevent browser default behavior in js

 <br>

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 prevent default behavior

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

Prevent bubbling

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

stopPropagation is also a method of the event object (Event), which is used to prevent the bubbling of the target element. event, but 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>
<ul>
<li>test</li>
</ul>
</div>

above, the Demo is as follows. When we click test, alert("li"), alert("ul"), alert("div") will be triggered in sequence. This It's just events bubbling up.

• Test bubbling

Prevent bubbling

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

• Stop bubbling

Prevent default behavior

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

preventDefault, which 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>caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

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 following one uses native js, which will only prevent the default behavior and will not stop bubbling.

<div>
<ul>
<li><a>caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

The following one Use jQuery to both prevent the default behavior and stop bubbling

//code from 
<div>
<ul>
<li><a>caibaojian.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});

Demonstration: Stop bubbling and prevent the default behavior

• caibaojian.com

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

1. event represents the status of the event, such as the element that triggered the event object, the position and status of the mouse, Keys pressed, etc.;

2. #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 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.

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
}

 <br>

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