Javascript 在单击其子级时检测div

我有简单的html结构

<aside>
  <div>
     <p>I WANT TO BE DIV</p>
  </div>
    <div>
     <p>I WANT TO BE DIV</p>
  </div>
</aside>

aside{
  width: 100px;
  height: 300px;
  border: 1px solid blue;
  color:black;
}
div{
  width: 100px;
  height: 100px
}

但是当我点击文本时，它不会被调用。如何修改代码以使其正常工作

问题

它不会对文本做出反应，因为文本位于

p

标记中，并且您正在检查

nodeName

是否匹配

DIV

如何修改代码以使其正常工作

我添加了一个OR案例，可以容纳这一点

var x= document.querySelector("aside");
x.addEventListener("click",function(e){
  if( e.target.nodeName == 'DIV' || e.target.nodeName == 'P'){
    alert(e.target.nodeName);
  }
},true)

这是一个

同样，我不太清楚你为什么会有整个

target.nodeName

部分。我会有下面这样简单的东西

var x= document.querySelector("aside"); x.addEventListener("click",function(e){

 alert("Hi there");

},true)

这是一个

---

我还强烈建议您检查JQuery及其选择器，作为更好的选择。

很容易测试目标父级（

元素.parentNode

）是否是

，但最好的方法可能是沿着DOM树，直到到达

DIV

或事件侦听器所在的元素：

var x = document.querySelector("aside");

x.addEventListener("click", function(e) {
    for (var tg = e.target; tg !== x && tg != null; tg = tg.parentNode) {
        if (tg.nodeName === 'DIV') {
            alert('You clicked on a <div> or an element inside it');
            break;
        }
    }
}, true);

var x=document.querySelector（“旁白”）；
x、 addEventListener（“单击”，函数（e）{
for（var tg=e.target；tg！==x&&tg！=null；tg=tg.parentNode）{
if（tg.nodeName=='DIV'）{
警报（“您单击了一个或其中的一个元素”）；
打破
}
}
}，对）；

请注意，这甚至适用于段落的子元素（例如a

或

）

---

您的上述代码目标将始终处于一旁，因此您的条件将失败。如果您要侦听div，则x应查询select div。否，子元素上也会触发事件，然后子元素就是目标。此代码应按预期工作。我理解J.dd为什么要这样做：只有在

div在
旁边
被点击，但他/她不想为每个
div
添加一个事件侦听器。很公平，这是有道理的！不知怎的，JQuery在这里似乎是一个更好的用例。
var x = document.querySelector("aside");

x.addEventListener("click", function(e) {
    for (var tg = e.target; tg !== x && tg != null; tg = tg.parentNode) {
        if (tg.nodeName === 'DIV') {
            alert('You clicked on a <div> or an element inside it');
            break;
        }
    }
}, true);