JavaScript中防止触发子元素事件时父元素也被触发,可以使用stopPropagation方法来停止子元素向上冒泡。
举例如下:
HTML代码:
这是子元素
JavaScript代码:
同时为子元素(p)以及父元素(div)设置了点击事件。并在子元素(p)的点击事件回调用使用了stopPropagation方法来阻止事件向上冒泡。
$('div').click(function() {
console.log('我是被父元素触发的');
});
$('p').click(function(e){
e.stopPropagation();
console.log('我是被子元素触发的');
});
正确运行结果:
运行结果仅仅只显示子元素应该触发的内容,而并没有显示父元素的触发内容。
假设我将子元素回调中的stopPropagation删除,结果将会变成:
从上面的案例可以看出,如果删除了stopPropagation方法,父元素将会被触发。
不设置一样的class或者id就可以了,给对应的class添加事件