Question

我想知道如何处理另一个内部的事件

这是我使用的代码：

var title=document.getElementsByClassName('lv1');
for (var i = 0; i < title.length; i++) {
      title[i].addEventListener('click',  (event) => {
      alert("click title");
},false);
}
var deleted=document.getElementsByClassName('remove');
for (var i = 0; i < deleted.length; i++) {
  deleted[i].addEventListener('click',  (event) => {
    alert("click remove");
  },false);
}

<div class="lv1">
  <h1>
    test
  </h1>
  <button class="remove">
  REMOVE
  </button>
</div>

您有两个点击事件lv1和delete。但是delete在lv1内部，所以当我去delete时，两个点击事件都会被触发。

在计算机上，我可以通过添加一个鼠标悬停事件来解决此问题，以了解我是否正在悬停删除操作，并以此方式知道是否必须触发lv1事件。

但是我不能在移动设备上使用此技巧； mouseover事件不存在。我错过了什么？

Answer 1

您需要event.stopPropagation()

var title=document.getElementsByClassName('lv1');
for (var i = 0; i < title.length; i++) {
      title[i].addEventListener('click',  (event) => {
      alert("click title");
},false);
}
var deleted=document.getElementsByClassName('remove');
for (var i = 0; i < deleted.length; i++) {
  deleted[i].addEventListener('click',  (event) => {
    alert("click remove");
    event.stopPropagation();
  },false);
}

<div class="lv1">
  <h1>
    test
  </h1>
  <button class="remove">
  REMOVE
  </button>
</div>

其他JS事件移动设备中的JS事件

1 个答案: