我有一个内部带有按钮的div，我想为两者创建单独的单击事件，但是当单击按钮时，它会触发按钮事件和容器事件。有人可以帮我吗。我没有使用jQuery。
var button = document.querySelector('button');
button.addEventListener('click', function(){
alert('button clicked');
})
var container = document.querySelector('.container');
container.addEventListener('click', function(){
alert('container clicked');
}).container{
width:300px;
height:300px;
border:1px solid;
position:relative;
z-index:1;
}
button{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index:2;
}<div class="container">
<button>click</button>
</div>使用e.stopPropagation();阻止事件的从子元素的父元素的传播。
var button = document.querySelector('button');
button.addEventListener('click', function(e){
e.stopPropagation();
alert('button clicked');
})
var container = document.querySelector('.container');
container.addEventListener('click', function(){
alert('container clicked');
}).container{
width:300px;
height:300px;
border:1px solid;
position:relative;
z-index:1;
}
button{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
z-index:2;
}<div class="container">
<button>click</button>
</div>只要确保在stopPropagation与preventDefault
stopPropagation阻止事件冒泡事件链。
preventDefault防止浏览器对该事件执行默认操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句