事件.目标。选择父母而不是孩子答案

【问题标题】：Event.target. Select the parent instead the child事件.目标。选择父母而不是孩子
【发布时间】：2016-05-20 11:01:27
【问题描述】：

我想知道是否有机会只选择父 div 而不是它的子 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 已被点击的 msg。现在，如果我点击 p 标签，我会收到 p msg。

事实是我试图只选择 div 而不是 p 标签，例如更改其所有颜色。谢谢你们。

【问题讨论】：

stackoverflow.com/questions/2728252/… 或者您可以使用 css 删除 p 标签的指针事件

标签： javascript jquery events target

【解决方案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;

【讨论】：

【解决方案2】：

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

试试这个

【讨论】：

谢谢，这或多或少是我想要的！

【解决方案3】：

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

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

您的操作方式意味着无论您在何处单击整个文档，它都会将该元素作为目标。所以它可能会抓取 div 中的 p，而不是 div 本身。

【讨论】：

这并不能回答实际问题。
给一个人一个机会。我已经提交，然后意识到自己。