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

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

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

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

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

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


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

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


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


          this.parentNode

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


大致看了一下,你的问题是下面这样的吗?

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

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,直接用代理很少的代码就可以实现,如果用原生的话,可能就要写这么一堆代码了。初步用楼主提供的链接测试了一下,上面的代码应该可以达到目的。

【热门文章】
【热门文章】