The connection between event.stopPropagation() and event.preventDefault()

Table of contents

Prevent event bubbling, prevent default event, difference between event.stopPropagation() and event.preventDefault(), return false

---

Today let's take a look at how the front-end bubbling and event default events are handled

1.event.stopPropagation() method

This is a method to prevent the event from bubbling, preventing the event from spreading to the documen, but the default event will still be executed. When you use this method, if you click on a connection, the connection will still be opened.

2. event.preventDefault() method

This is the method to prevent the default event. When this method is called, the connection will not be opened, but bubbling will occur, and the bubbling will be passed to the parent element of the previous layer;

3.return false  ；

This method is more violent. He will prevent event bubbling and default events at the same time; write this code, the connection will not be opened, and the event will not be passed to the parent element of the previous layer; it can be understood that return false is equal to the same time Called event.stopPropagation() and event.preventDefault()

4. Let's take a look at several groups of demos, using jquery for DOM operations

 Let's look at the js code, the first one:

The second type:

 

The third type:

 event.stopPropagation() and event.preventDefault(), and return false

 The fourth type:

The fifth type: