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: ·

e849e780724ad7e3d96667dbe71b15d8
d13c37413a3b74a6f638c2bd0a192e36
e625d1e300d7d5c06d09121b24123e42testbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

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 3499910bf9dac5ae3c52d5ede7383485, submit button 54b28e0e73a12e4a8ed487872a6fb5b8, 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 3499910bf9dac5ae3c52d5ede7383485 is to jump to the specified page. Let’s take it as an example to prevent it from jumping:

//假定有链接108bdfb517e761bb879be093c0040de3caibaojian.com5db79b134e9f6b82c0b36e0489ee08ed
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.

189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac237316d85963b455defc45a0e7b4a3d9b74ebecaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
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 
189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac2373169e974483976d37374c9db7635fc7fceacaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
$("#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!