javascript - 如何用原生js通过点击事件获取某一确定的父元素

Question

http://jsbin.com/wiwezapaxo/1/edit?html,js,output

在这个示例中，通过event.target来获取每次点击的目标，实际中可能会有多层嵌套，而我想每次不管点击p中的哪个区域，都返回该box对象

请问有什么好的方法吗？ 我只能想到递归

不用event.target 也可以，只要能用原生的js解决即可

---

补充，http://jsbin.com/viqozifito/edit?html,js,output

答者有点没理解我的意思，有一个box 列表，在box的父容器上绑定点击事件，每次点击子元素，如何找到它的父box元素

Answer 1

大致看了一下，你的问题是下面这样的吗？

<p id="p">
    <p class="box">
        ......
    </p>
    <p class="box">
        ......
    </p>
</p>

box里面有n个子元素，现在event是绑定在#p上，但是你想找到每次点击的box，就类似于很长的新闻列表，你把event绑定在最外面的container上，但是你想找到每次点击的新闻的单个容器。

如果你的问题是上面的，那你可以这样解决

var obj = document.getElementById("p");
obj.addEventListener("click",function(ev){
    var target = ev.target;
    if(target.className.indexOf('box')!==-1){return target;}//这种情况下，点击的就是box元素，比如box里面有个padding的值，返回的就是自己。
    if(target == obj){return false;}//这种情况下，点到的是box与box之间的空隙，比如box有个margin-bottom:20px，返回false
    while(target.className.indexOf('box') === -1){
        target = target.parentNode;
    }
    return target;//返回的target即是你要的box元素
});

当然这种做法和楼主自己提出的做法比较类似。如果可以用jquery，直接用代理很少的代码就可以实现，如果用原生的话，可能就要写这么一堆代码了。初步用楼主提供的链接测试了一下，上面的代码应该可以达到目的。

Answer 2

jsvar obj = document.getElementById("box");
obj.addEventListener("click",function(ev){
  console.log(this === obj); //true
});

Answer 3

如果你是要获取绑定事件的那个父元素，直接在事件代理函数中使用this关键字即可。

Answer 4

          this.parentNode