Question

我有一个带有按钮的div，我想为两者创建单独的点击事件但是当点击按钮时它会触发按钮事件和容器事件。有人可以帮我吗。我没有使用jQuery。

＆＃13;

var button = document.querySelector('button');
button.addEventListener('click', function(){
  alert('button clicked');
})
var container = document.querySelector('.container');
container.addEventListener('click', function(){
  alert('container clicked');
})

＆＃13;

.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;
}

＆＃13;

<div class="container">
  <button>click</button>
</div>

＆＃13;

Answer 1

使用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会阻止浏览器对其执行的默认操作   事件

Answer 2

点击按钮时，尝试e.stopPropagation()将事件冒泡到父级。

更多信息：stopPropagation()

工作代码：

＆＃13;

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');
})

＆＃13;

.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;
}

＆＃13;

<div class="container">
  <button>click</button>
</div>

＆＃13;

当里面有一个按钮时，可以使div背景可点击

2 个答案: