javascript - 如何确保可点击对象不会传播到错误的元素？

Question

涉及的语言:HTML、CSS、JS

背景:我是网络开发的新手。我有两个相互重叠的元素。一个是 slider ，一个是 div。 slider 位于 div 的顶部。

代码片段:

<div id="myDiv">
  <input id="mySlider" type="range" min=1 max=100 step=1>
</div>

和

initListeners() {
  document.getElementById("myDiv").addEventListener("click", divFunction);
  document.getElementById("mySlider").addEventListener("input", sliderFunction);
}

我需要让它在您单击 slider 时不会单击 div。我该怎么做呢？我试过 z-index，但这似乎没有任何改变。

提前致谢!

Answer 1

我相信您现在已经明白了，默认情况下，JavaScript 中的事件会从子级向上冒泡到父级。您需要在子级别阻止这种情况发生，也称为防止传播。

使用 stopPropagation函数，您可以按如下方式处理:

function sliderFunction(e) {
     e.stopPropagation();
}

简单。该事件将不再到达父级。

编辑

虽然停止传播是正确的使用方法，但事件监听器的类型也必须匹配。因此， slider 和父 DIV 都必须具有 click 事件监听器(而不是 input 和 click)。 stopPropagation 停止特定类型事件的传播。

function divFunction() {
	console.log('DIV clicked!');
}

function sliderFunction(event) {
  event.stopPropagation();
	console.log('Slider clicked!');
}

function initListeners() { 
	document.getElementById('myDiv').addEventListener('click', divFunction);
  document.getElementById('mySlider').addEventListener('click', sliderFunction); 
} 

initListeners();

/* unnecessary visual aides */

body *:not(label) {
  padding: 2rem;
  outline: 1px solid red;
  position: relative;
}

label {
  display: inline-block;
  position: absolute;
  background: #222;
  color: #fff;
  top: 0; left: 0;
}

<div id="myDiv">
  <label>#myDiv</label>
  <div id="tools">
    <label>#tools</label>
    <input type="range" id="mySlider">
  </div>
</div>