JS 中动态添加元素的click和document的click事件的关系

时间:2024-03-31 09:15:08

最近在做一个项目,点击动态添加的元素,如一组箭头

JS 中动态添加元素的click和document的click事件的关系

然后需要在页面中完成 点击,把箭头图片添加到页面上,这时候需要监听页面的click事件。调试发现首先会调用箭头元素的click事件,然后会继续冒泡调用document的click事件,我之前不知道这个逻辑,所以掉坑里了。

搜了一下,解决办法有https://www.cnblogs.com/sqh17/p/7746418.html

有三种办法阻止事件继续向上传递

$().on()的知识点补充:
  1.从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。
    $().bind()直接绑定在元素上,和click,blur,mouseon一样的点击事件。
    $().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。
    $().delegate()是更精确的小范围的使用事件代理。
   $().on()结合了这三个方法的优势摒弃了劣势。

  2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
  3. 阻止事件冒泡和事件委托的方法:
    A:return false。 
      在事件的处理中,可以阻止默认事件和冒泡事件。

    B:event.preventDefault()
      在事件的处理中,可以阻止默认事件但是允许冒泡事件的发生。

    C:event.stopPropagation().。
      在事件的处理中,可以阻止冒泡但是允许默认事件的发生。

 

 JS 中动态添加元素的click和document的click事件的关系

都试了一下,只有第三种方法可以解决这个问题,效果就是元素click响应结束后,不会继续冒泡,document不会捕获到这次的click事件了,简单记录一下。