Does stopPropgation stop the event from propagating in the capture phase?

前端 未结 3 1903
闹比i
闹比i 2021-02-07 06:38

I was looking at http://www.quirksmode.org/js/events_order.html and it is ambiguous in this part:

In the Microsoft model you must set the event’s ca

3条回答
  •  别那么骄傲
    2021-02-07 07:00

    stopPropagation() will not stop the captured event handler from getting called. stopPropagation() will stop the bubbled event handler from getting called.

    Jsfiddle

    var outputDiv = document.getElementById('output');
    
    function log(msg) {
      outputDiv.insertAdjacentHTML('afterend', msg + '
    '); } ///////////////////// //Bubbling listeners ///////////////////// document.getElementById('row1').addEventListener('click', function(e) { log('Bubbling row1 listener called'); e.stopPropagation(); }, false); document.getElementById('row2').addEventListener('click', function(e) { log('Bubbling row2 listener called'); //NO stopPropagation on this one. }, false); document.getElementById('table').addEventListener('click', function() { log('Bubbling table listener called'); }, false); document.addEventListener('click', function() { log('Bubbling document listener called'); }, false); ///////////////////// //Capturing listeners ///////////////////// document.addEventListener('click', function() { log('Capturing document listener called'); }, true); document.getElementById('table').addEventListener('click', function() { log('Capturing table listener called'); }, true);
    #outputwrapper {
      border: 1px solid black;
      height: 300px;
      overflow: scroll;
    }
    This row has stopPropagation
    This row does not have stopPropagation

    Output

提交回复
热议问题