Question

我有简单的html结构

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

当我点击div时，我想使用

为它调用一个函数

function myValue()
{
    var arr = new Array("pro","pro1","pro2");
    for(var i =0 ;i<arr.length;i++)
    {
      document.getElementById("txt").innerHTML = arr[i];
      //document.write(arr[i]);
    }
}

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

https://jsfiddle.net/qc3ewpmz/

Answer 1

问题

它不会对文字做出反应，因为文字位于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)

这是DEMO

，我不太清楚你为什么要拥有整个target.nodeName部分。我会有一些简单的事情如下

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

 alert("Hi there");

},true)

这是DEMO

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

Answer 2

如果目标父级（Element.parentNode）是<div>，则可以轻松测试，但可能最好的方法是在达到{{1}之前上升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);或<strong>。

JSFiddle

在点击其子项时检测div

2 个答案: