Question

jquery 父元素 和 子元素 都是jquery动态添加到dom上的。他俩都有单击事件

当我点击子元素时 怎么不触发父元素的事件？急！！！在线等

Answer 1

JavaScript中防止触发子元素事件时父元素也被触发，可以使用stopPropagation方法来停止子元素向上冒泡。

举例如下：

HTML代码：

<div>
    <p>这是子元素</p>
</div>

JavaScript代码：

同时为子元素（p）以及父元素（div）设置了点击事件。并在子元素（p）的点击事件回调用使用了stopPropagation方法来阻止事件向上冒泡。

$('div').click(function() {
    console.log('我是被父元素触发的');
});

$('p').click(function(e){
    e.stopPropagation();
    console.log('我是被子元素触发的');
});

正确运行结果：

运行结果仅仅只显示子元素应该触发的内容，而并没有显示父元素的触发内容。

假设我将子元素回调中的stopPropagation删除，结果将会变成：

从上面的案例可以看出，如果删除了stopPropagation方法，父元素将会被触发。

Answer 2

不设置一样的class或者id就可以了，给对应的class添加事件