鍍金池/ 問答/HTML5  HTML/ table事件綁定mouseover,td、table都經(jīng)過，但是tr沒有觸發(fā)冒

table事件綁定mouseover,td、table都經(jīng)過，但是tr沒有觸發(fā)冒泡，不知道為什么

table綁定了mouseover,但冒泡沒有觸發(fā)tr，從td直接到了table

相關(guān)代碼

1 2 3 6
4 5 11 3
7 8 9 10

<script>

document.getElementById('t').addEventListener('mouseover', function(e){
    if (e.target.nodeName.toLowerCase() == 'td') {
        console.log('1')
    };
    if (e.target.nodeName.toLowerCase() == 'tr') {
        console.log('2');
    };
    if (e.target.nodeName.toLowerCase() == 'table') {
        console.log('3');
    }
}, false)

</script>

結(jié)果如下

clipboard.png

回答
編輯回答
單眼皮
修改答案，使用jquery遍歷tr
js的.addEventListener事件在jquery是.on這個(gè)。

getElementById("t").addEventListener("mouseover", function()
改成
$("#t tr").on("mouseover",function()

<script type="text/javascript">
$("#t").find("tr").each(function(){//遍歷tr
$("#t tr").mouseover(function(){//mouseover事件
var index = $("#t tr").index(this);
console.log("第"+ index +"個(gè)tr");
});
});
</script>

圖片描述

參考代碼。效果截圖
<script type="text/javascript">
document.getElementById("t").addEventListener("mouseover", function(){
        if(this.getElementsByTagName("td")){
        console.log("1")
    };
            if(this.getElementsByTagName("tr")){
        console.log("2")
    };
                if(this.getElementsByTagName("table")){
        console.log("3")
    };
//    if (e.target.nodeName.toLowerCase() == "td") {
//        console.log("1");
//    };
//    if (e.target.nodeName.toLowerCase() == "tr") {
//        console.log("2");
//    };
//    if (e.target.nodeName.toLowerCase() == "table") {
//        console.log("3");
//    }
}, false)
</script>

圖片描述

2017年4月10日 20:32