Question

我想知道是否有机会只选择父div而不是其子。一个简单的例子是：

<!DOCTYPE html>
<html>
<body onclick="myFunction(event)">
  <div style="border: solid black 2px">

    <p>Click on a paragraph. An alert box will alert the element 
       that triggered the event.</p>

    <p><strong>Note:</strong> The target property returns the element that 
       triggered the event, and not necessarily the eventlistener's element.</p>
</div>
<script>
  function myFunction(event) { 
    alert(event.target.nodeName);
  }
</script>
</body>
</html>

我想要的很简单，我想点击div，（不介意它是否在p标签上）并接收已被点击div的消息。到现在，如果我点击p标签，我将获得p msg。

事实是我只想选择div而不是p标签，例如改变它的所有颜色。谢谢你们。

Answer 1

要选择父元素，请使用

event.target.parentName

如果事件可能发生在任何元素上，并且您想要在event.target上查找某个祖先元素，则需要沿着继承链向上走。或者使用jquery，它有一个方法。

如果您的案例很简单，例如

if (event.target.tagName == "DIV") return event.target;
if (event.target.parentName.tagName == "DIV") return event.target.parentName;

Answer 2

function myFunction(event) { 
alert(event.target.parentNode.nodeName);
}

试试这个

Answer 3

$('div').on('click', function(event) {
    alert(event.target.nodeName);
});

简单地说，在这种情况下，在点击任何div时，会出现一个带有nodeName的警报。

你完成它的方式意味着无论你点击整个文档，它都会抓住那个元素作为目标。所以它可能会抓住div中的p，而不是div本身。

Event.target。选择父项而不是子项

3 个答案: