zoukankan      html  css  js  c++  java
  • [TimLinux] JavaScript 阻止父节点接收子节点事件的方法

    1. 事件

    两种类型的事件:触发式、冒泡式

    2. 冒泡式

    触发式:事件从DOM结构的顶层往下走的事件触发过程;

    冒泡式:事件从DOM结构的底层往上走的事件触发过程。

    3. 父子节点

    当父、子节点同时对一个事件进行监听的时候,冒泡式的事件方式中,发生在子节点中的事件,在完成子节点事件处理函数后,将继续执行父节点注册的事件处理函数。

    • 父、子节点都对某事件进行了监听,比如:父节点监听了onclick,子节点也监听了onclick事件
    • 发生在子节点上的事件,子节点事件处理函数将优先被调用
    • 如果只发生在父节点上,则与子节点没有关系
    • 子节点上的事件执行完成之后,父节点事件处理函数接下来被调用

    4. 取消事件传递

    在子节点事件处理函数中,通过调用事件处理函数参数:event.stopPropagation()函数,来阻止事件的冒泡行为。

    • 事件处理函数,接收一个参数,即event事件对象,event = event || window.event,然后调用event.stopPropagation()。

    5. 使用场景

    蒙版div作为父元素,蒙版div的子元素作为内容的呈现区域,当点击内容呈现区域之外时,能够关闭蒙版,但是点击内容程序区域则不会触发蒙版的关闭,此时通过在内容程序区域(子div节点)给Onclick事件处理函数中,使用event.stopPropagation()函数来阻止:点击此内容呈现区域导致的蒙版关闭行为。

  • 相关阅读:
    PhoneGap 的文件 api
    81-POJ-Wall(计算几何)
    12-凸包模板-计算几何
    80-计算几何-奶牛
    79-多边形的面积-计算几何
    78-直线相交-计算几何
    11-欧拉函数详解
    76-Relatives-欧拉函数
    29-中国剩余定理CRT
    2018.3.12 Leecode习题 给定一个整数数列,找出其中和为特定值的那两个数。
  • 原文地址:https://www.cnblogs.com/timlinux/p/9185326.html
Copyright © 2011-2022 走看看