How to prevent JS bubbling and browser default behavior-JS Tutorial-php.cn

How to prevent JS bubbling and browser default behavior

php中世界最好的语言

Release： 2018-03-16 10:25:13

Original

1447 people have browsed it

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();
}

Copy after login

jsPrevent default behavior

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

Copy after login

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>

Copy after login

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();

Copy after login

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;
}
}

Copy after login

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;
};

Copy after login

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;
});

Copy after login

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; 
}

Copy after login

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; 
}

Copy after login

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

Copy after login

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!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to prevent JS bubbling and browser default behavior