zoukankan      html  css  js  c++  java
  • 一个场合, 事件捕获派上了用处

    场景:

      (比较少见) 如果有个js生成的dom元素, 里面绑定了一些click 事件, 我们想在不hack原先代码的情况下, 把dom 里面的事件拦截.

    思路:

      事件机制有捕获和冒泡, 现在主流浏览器的事件都是冒泡机制, 即从事件发生的dom元素开始层层向上出发, 对于我们要拦截的dom, 显然没法在它的更深层次 event.stopPropagation(), 所以目标dom始终会被先触发. 

      换个思路, 捕获机制则相反, 从顶层的dom元素开始层层深入, 这就给了拦截一个机会. 找到目标dom 的外层元素, 阻止事件传递即可.

    代码:

    1 <div class="outer">
    2     <div class="inner">
    3         hello
    4     </div>
    5 </div>
     1 $(function () {
     2     $inner = $(".inner");
     3     $inner.on('click', function () {
     4         console.log('inner');
     5     })
     6     document.querySelector(".outer").addEventListener("click", function (event) {
     7         console.log('outer');
     8         event.stopPropagation();
     9     }, true);
    10 })

    addEventListener 的第三个参数是捕获模式标志位.

    点击outer内部的任意区域, inner 都不会被触发, 只会输出: 

    "outer"  ("inner" 将会被拦截, 不打印)

  • 相关阅读:
    Python 函数与函数式编程
    Python 字符编码与转码
    Python 读写txt文件操作
    两阶段事务总结
    MPPDB集群高可用设计
    MPPDB中的各个组件
    IntelliJ IDEA2016学习小结
    mysql免安装版配置
    理想的智能机
    java对象的大小
  • 原文地址:https://www.cnblogs.com/tangkikodo/p/6114576.html
Copyright © 2011-2022 走看看