How to prevent the click event of a child element from affecting the double-click event of a parent element?

Cleverly resolve conflicts between child element clicks and parent element double-click events

When the parent element binds a double-click event (dblclick) and the child element binds a click event (click), the quick click of the child element may accidentally trigger the double-click event of the parent element. This article provides two methods to effectively avoid this conflict.

Assume the following code structure:

<div>
    <div></div>
</div>

Corresponding functions:

 showPreset(event) {
    console.log('aaaaa');
}

changeFullScreen(event) {
    console.log('bbbb');
}

Blocking bubbles directly or using event.stopImmediatePropagation() does not solve the problem, because click and double-click events are different event types. The key is to prevent the double-click event of child elements from bubbled.

Method 1: Add an empty double-click event to the child element

Add a double-click event on the child element, but do nothing, just preventing the event from bubbled:

 nothingFn(event) {
  event.stopPropagation();
};

Method 2: Event source judgment

In the double-click event handler function of the parent element, check the event source event.target :

 changeFullScreen(event) {
    if (event.target === this.$el) { // this.$el points to the parent element console.log('bbbb');
    }
}

A double-click event is executed only if the event source is the parent element itself.

Through the above two methods, the click event of the child element can be effectively prevented from interfering with the double-click event of the parent element, ensuring the correctness of the program logic.

The above is the detailed content of How to prevent the click event of a child element from affecting the double-click event of a parent element?. For more information, please follow other related articles on the PHP Chinese website!