Javascript 事件。目标。选择父对象而不是子对象_Javascript_Jquery_Events_Target

Javascript 事件。目标。选择父对象而不是子对象

javascript jquery events

Javascript 事件。目标。选择父对象而不是子对象,javascript,jquery,events,target,Javascript,Jquery,Events,Target,我想知道是否有可能只选择父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 triggere

我想知道是否有可能只选择父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的消息。现在，如果我点击p标签，我会得到p消息

事实上，我正在尝试选择div而不是p标签，例如更改其所有颜色。谢谢大家

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

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

您这样做的方式意味着，无论您在哪里单击整个文档，它都会抓住该元素作为目标。因此，它可能会在div中获取p，而不是div本身

要选择父元素，请使用

event.target.parentName

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

如果您的案例像示例中那样简单，您可以

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

试试这个

或者你可以使用css删除p标记的指针事件，但这并不能回答实际问题。给一个家伙一个机会。我已经提交，然后意识到自己。谢谢你，这或多或少是我想要的！

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