Specific implementation of js preventing event appending_javascript skills

Sometimes you can use e.stopPropagation(); e.preventDefault(); to prevent event bubbling and the execution of default events. But it cannot prevent the event from being added.

Under what circumstances should we prevent the addition of events?

For example:

Click "Checkout". When doing this, the checkout itself has its own event, but you must determine whether to log in before checking out.

We might write:

Js code

Copy code The code is as follows:

if(isLogin){ //Determine whether to log in
console.log("Not logged in")
}else{
//Checkout related code
}

If you click "My Homepage", there is also a login check
Login judgment code

if(isLogin){ //Determine whether to log in
console.log("Not logged in")
}else{
//Personal Center
}

If there are more logins to judge. Will there be more code like the above? Later I discovered the stopImmediatePropagation() method to prevent events from being appended. The above problem is no longer a problem.

Important: Make sure the login judgment event is the first bound event.

Demo code

Copy code The code is as follows:

Checkout

• Add to favorites


• Pay by others


• Add to Cart


• My Homepage

<script> <br /> //Bind first <br /> $(".isLogin").on("click", function (e) { <br /> <br /> if(true){ //Login judgment <br /> alert("Not logged in"); <br /> e.stopImmediatePropagation(); <br /> } <br /> <br /> return false; <br /> }); <br /> <br /> $(".bill").on("click",function(){ <br /> alert("Checkout related content!"); <br /> }); <br /> <br /> $(".a1").on("click",function(){ <br /> alert("a1"); <br /> }); <br /> <br /> $(".a2").on("click",function(){ <br /> alert("a2"); <br /> }); <br /> <br /> $(".a3").on("click",function(){ <br /> alert("Added to cart"); <br /> }); <br /> <br /> $(".a4").on("click",function(){ <br /> alert("Login determination"); <br /> }); <br /> <br /> <br /> </script>

In fact, jquery provides us with the method $._data($('.isLogin').get(0)) to view events, open firebug and enter in the console.
Js code

$._data($('.isLogin').get(0))

You will see the following:

Js code

Object { events={...}, handle=function()}

Click to see the event array, making it easy to see what events are bound to the element.