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

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

In front-end development, the conflict between the child element click event and the parent element double click event is often a headache. Especially when clicking a child element quickly, it is easy to accidentally trigger the double-click event of the parent element. This article provides two methods to effectively solve this problem.

Assume that the HTML structure is as follows:

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

And the corresponding event handling function:

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

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

A simple event.stopPropagation() or return false does not resolve this issue because click event and double-click event are different event types.

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

Bind an empty double-click event handler on the child element to prevent the double-click event from bubbled:

 nothingFn() {}; // Empty function, no operations // ... Other code...

Bind nothingFn to the double-click event of the child element to prevent the double-click event from bubbled upwards, thus avoiding triggering the changeFullScreen function of the parent element.

Method 2: Judgment based on event target element

Use the event bubble mechanism to determine the trigger source of the double-click event by checking event.target . If it is a parent element, changeFullScreen is executed; if it is a child element, it is ignored. This method requires modifying the processing logic of the double-click event to enable it to distinguish the source of the event.

Through the above two methods, the child element click event can be effectively prevented from triggering the parent element double-click event, thereby avoiding event conflicts. Which method to choose depends on the specific project requirements and code structure.

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