首頁(yè) 猿問(wèn) 如何用原生js通過(guò)點(diǎn)擊事件獲取某一...

如何用原生js通過(guò)點(diǎn)擊事件獲取某一確定的父元素

JavaScript

德瑪西亞99 2019-04-13 08:36:50

http://jsbin.com/wiwezapaxo/1/edit?html,js,output在這個(gè)示例中，通過(guò)event.target來(lái)獲取每次點(diǎn)擊的目標(biāo)，實(shí)際中可能會(huì)有多層嵌套，而我想每次不管點(diǎn)擊div中的哪個(gè)區(qū)域，都返回該box對(duì)象請(qǐng)問(wèn)有什么好的方法嗎？我只能想到遞歸不用event.target也可以，只要能用原生的js解決即可補(bǔ)充，http://jsbin.com/viqozifito/edit?html,js,output答者有點(diǎn)沒理解我的意思，有一個(gè)box列表，在box的父容器上綁定點(diǎn)擊事件，每次點(diǎn)擊子元素，如何找到它的父box元素

查看完整描述

2 回答

慕少森

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊

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

反對(duì) 回復(fù) 2019-04-13

小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

大致看了一下，你的問(wèn)題是下面這樣的嗎？......

......

box里面有n個(gè)子元素，現(xiàn)在event是綁定在#p上，但是你想找到每次點(diǎn)擊的box，就類似于很長(zhǎng)的新聞列表，你把event綁定在最外面的container上，但是你想找到每次點(diǎn)擊的新聞的單個(gè)容器。如果你的問(wèn)題是上面的，那你可以這樣解決varobj=document.getElementById("p");obj.addEventListener("click",function(ev){vartarget=ev.target;if(target.className.indexOf('box')!==-1){returntarget;}//這種情況下，點(diǎn)擊的就是box元素，比如box里面有個(gè)padding的值，返回的就是自己。if(target==obj){returnfalse;}//這種情況下，點(diǎn)到的是box與box之間的空隙，比如box有個(gè)margin-bottom:20px，返回falsewhile(target.className.indexOf('box')===-1){target=target.parentNode;}returntarget;//返回的target即是你要的box元素});當(dāng)然這種做法和樓主自己提出的做法比較類似。如果可以用jquery，直接用代理很少的代碼就可以實(shí)現(xiàn)，如果用原生的話，可能就要寫這么一堆代碼了。初步用樓主提供的鏈接測(cè)試了一下，上面的代碼應(yīng)該可以達(dá)到目的。