Event.target。 Select parent 而不是 child

Question

我想知道是否有可能 select 只使用 parent div 而不是 child。一个简单的例子是：

<!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 消息。

事实上，我正在尝试 select div 而不是仅 p 标签，例如更改其所有颜色。谢谢你们。

Answer 1

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

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

按照您的操作方式，无论您在整个文档中单击什么位置，它都会将该元素作为目标。所以它可能会获取 div 中的 p，而不是 div 本身。

Answer 2

到select父元素，使用

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 3

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

试试这个

Event.target。 Select parent 而不是 child

Event.target. Select the parent instead the child

javascript

jquery

events

target