How to selectively cancel event listening for a specific element during event propagation?

Accurately control event propagation: selectively cancel the listening of event for specific elements

Precise control of event propagation is crucial when handling HTML element events, especially when multiple event listeners exist in nested elements. This article will demonstrate how to avoid executing event listeners for specific elements (e.g. elements that have non-modified built-in listeners) while allowing listeners for other elements to work properly.

Suppose we have the following HTML structure:

<div id="a">
  <div id="b">
    <div id="c"></div>
  </div>
</div>

Elements a, b, and c are all bound to multiple listening functions of the click event, where element b contains built-in listening functions that cannot be modified directly. Our goal is to prevent only the built-in listening function of element b, and let the listening function of element a and c continue to execute.

Solution: Cleverly use event delegation

Event delegates are an efficient event processing mechanism that controls event propagation of children by binding event listeners to parent elements.

Code Example

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event handling example</title>
    <style>
        #A, #B, #C {
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
        }
        #A { background-color: lightblue; }
        #B { background-color: lightgreen; }
        #C { background-color: lightcoral; }
    </style>


    <div id="A">
        A
        <div id="B">
            B
            <div id="C">C</div>
        </div>
    </div>

    <script>
        // 将A和C元素的监听函数绑定到父元素A上
        document.getElementById('A').addEventListener('click', function(event) {
            if (event.target.id === 'A') {
                console.log('A 元素被点击');
            } else if (event.target.id === 'C') {
                console.log('C 元素被点击');
            }
        });

        // 为B元素添加自定义监听函数，阻止事件进一步传播
        document.getElementById('B').addEventListener('click', function(event) {
            event.stopImmediatePropagation(); // 阻止B元素内置监听函数执行
            console.log('B 元素自定义监听函数执行');
        });
    </script>

Principle analysis

1. Event delegate: By binding an event listener on the parent element A , the monitoring of events of child elements A and C is achieved. event.target.id is used to identify the specific trigger element of the event.

2. Selective blocking: In B -element's custom listener, use event.stopImmediatePropagation() method. This method prevents events from propagating further on element B , thus preventing the execution of element B ’s built-in listening function, but allows the event to continue to bubble up to parent element A , thus triggering the listener of element A

Through this method, we can accurately control event propagation, effectively handle event listening of nested elements, and avoid unnecessary conflicts.

The above is the detailed content of How to selectively cancel event listening for a specific element during event propagation?. For more information, please follow other related articles on the PHP Chinese website!