Question

如何在子元素上定义而不触发事件，例如在.mouseclick = 'no-event'或：.mousedown = 'no-event'上用自然的Javascript命令？

因此，它的父项将在冒泡之前获得第一个事件，父元素事件将得到e。 target = e.currentTarget

我需要对某些特定的子元素执行此操作，而对某些子元素则不需要。

在父元素“捕获”上，没有给出正确的行为如上所述。

我在网络上关注的所有其他解决方案都提供了许多“棘手的”解决方案不能正常工作。

Answer 1

var parentEl = document.getElementById('parent');
var childEl = document.getElementById('child');

parentEl.addEventListener('click', function(event) {

}, true)
childEl.addEventListener('click', function(event) {

}, true)

If you pass the true on eventListener it stops the event from bubbling.

Answer 2

您可以给孩子们一个自定义类，该类确定它是否应单击。在其父容器的回调函数内部，检查目标正在使用哪个类并采取相应措施。

这是一个例子：

var data = {
  "Class": [{
    "StudentName": [
      "Ash",
      "Win"
    ],
    "Rank": [
      "1",
      "2"
    ],
    "ID": [
      "001",
      "002"
    ]
  }]
};
var result = {"Class":[]}
data.Class.forEach(function(details) {
  details.StudentName.forEach(function(det,i) {
    var rs = {
      "StudentName" : details.StudentName[i],
      "Rank" : details.Rank[i],
      "ID" : details.ID[i]
    }
    result.Class.push(rs);
  })
})

console.log(result);

document.getElementById("container").addEventListener('click', function(e) {
  if (e.target.className == "clickable") {
    console.log("I should do something!");
  } else {
    console.log("I should NOT do something!");
  }
});

鼠标单击父元素，但防止其子元素触发事件

2 个答案: