zoukankan      html  css  js  c++  java
  • [HTML 5] stopPropagation & stopImmediatePropagation

    const app = document.getElementById('app');
    app.innerHTML = `
      <h1>JavaScript DOM</h1>
      <div class="one">
        <div class="two">
          <button type="button" class="three">
            Click Me
          </button>
        </div>
      </div>
    `;
    
    const one = document.querySelector('.one');
    const two = document.querySelector('.two');
    const three = document.querySelector('.three');
    
    function handleClick(event) {
      event.stopPropagation();
      // event.stopImmediatePropagation();
      console.log(event.target);
    }
    
    one.addEventListener('click', handleClick);
    two.addEventListener('click', handleClick);
    three.addEventListener('click', handleClick);
    
    three.addEventListener('click', event => console.log(event), { capture: true });
    

      

    When use 'stopPropagation', the code:

    three.addEventListener('click', event => console.log(event), { capture: true });

    will still running.

    But when use 'stopImmediatePropagtion', that line of code will not run any more

  • 相关阅读:
    jQuery标准的AJAX模板
    maven库
    在 Windows7 上按照 MySQL5.7
    如何保证代码的有效性
    项目负责人的职责
    string integer == equals 转
    走近AbstractQueuedSynchronizer
    STAR
    tesseract-ocr
    Spring @Qualifier l转
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12775100.html
Copyright © 2011-2022 走看看