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().。
　　　　　　在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

 

 

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