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.