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" 将会被拦截, 不打印)

  • 相关阅读:
    web学生选课平台
    YUM仓库的搭建
    定制RPM包
    会话保持
    Nginx负载均衡器+keepalived
    LAMP搭建配置
    KVM安装搭建
    安装PHP以及搭建博客(四)伪静态
    安装PHP以及搭建博客(三)服务迁移分离
    安装PHP以及搭建博客(二)
  • 原文地址:https://www.cnblogs.com/tangkikodo/p/6114576.html
Copyright © 2011-2022 走看看