首页 > javascript delegate dom元素

javascript delegate dom元素



< div id="parent"> <div id="child"></div> < div> document.querySelector("#parent").addEventListener("click",function(e){ var target = e.target || e.srcElement; if(target.id == "child"){ //do something; } })

在上面我们在parent 上监听 click事件,如果来自child,那么就do something,但是如果是下面的情况如何实现

<div id="parent">
    <div id="child">
        <div></div>
    </div>
<div>

我点击child里面那个没有任何id或者class的div, 冒泡到child上,再冒泡到parent上,我也要触发do something。
因为此时e.target 是那个未命名的div,所以不能采取原来的方法,此时怎么做


你总是需要有办法去标识那个 DIV 的,如果唯一的情况,可以

javascriptswitch (target.id) {
    case "child":
        // do something 1
        break;
    case "parent":
        // do something 2
        break;
    default:
        // do something other
}

如果有多个没法标识的DIV……那你还是加个标识来得快些


e.target.parentNode.id == "child"

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