Javascript 如何停止内部事件传播<；表>；？_Javascript_Events_D3.js

Javascript 如何停止内部事件传播<；表>；？

javascript events d3.js

Javascript 如何停止内部事件传播<；表>；？,javascript,events,d3.js,Javascript,Events,D3.js,我有mouseover和mouseout事件附加到。问题是，当鼠标悬停在上面时，这些事件会被触发，即使我指定了d3.event.stopPropagation和指针事件，元素也会被触发我做错了什么 <html> <head> <style> div.divContainer{ margin: 10em; background-color: darkorange; padding: 1em; } table{ background: s

我有mouseover和mouseout事件附加到。问题是，当鼠标悬停在上面时，这些事件会被触发，即使我指定了d3.event.stopPropagation和指针事件，元素也会被触发

我做错了什么

<html>
<head>
<style>
div.divContainer{
    margin: 10em;
    background-color: darkorange;
    padding: 1em;
}
table{
background: steelblue;
}
</style>

</head>
<body>
<div class="divContainer">
        <table>
            <tr>
                    <td>
                        Name
                    </td>

                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

            <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

            <tr>
                    <td>
                    Name
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

            <tr>
                    <td>
                    Name
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

            <tr>
                    <td>
                    Name
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

            <tr>
                    <td>
                    Name
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

            <tr>
                    <td>
                    Name
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Name
                    </td>
            </tr>

    </table>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>    


d3.select('table').on('mouseover',efunc1)

function efunc1(){
    alert("adf")
}

d3.select('table').on('mouseout',efunc)

function efunc(){
    alert("mouseout")
}


d3.select("tr").attr("pointer-events", "none")
d3.select("td").attr("pointer-events", "none")
// d3.select('table').on('mouseover',function(){d3.event.stopPropagation();})
d3.select('tr').on('mouseover',function(){d3.event.stopPropagation();})
// d3.select('td').on('mouseover',function(){alert("inside td")})


// d3.select('table').on('mouseout',function(){d3.event.stopPropagation();})
d3.select('tr').on('mouseout',function(){d3.event.stopPropagation();})
// d3.select('td').on('mouseout',function(){d3.event.stopPropagation();})

</script>

</body>

</html>


div.div容器{
边缘：10em；
背景色：达克朗格；
填充：1em；
}
桌子{
背景：钢蓝；
}
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
名称
d3.选择（'table'）。打开（'mouseover'，efunc1）
函数efunc1（）{
警报（“adf”）
}
d3.选择（'table'）。打开（'mouseout'，efunc）
函数efunc（）{
警报（“鼠标出”）
}
d3.选择（“tr”）.attr（“指针事件”，“无”）
d3.选择（“td”）.attr（“指针事件”，“无”）
//d3.select（'table'）.on（'mouseover'，function（）{d3.event.stopPropagation（）；}）
d3.select（'tr'）.on（'mouseover'，function（）{d3.event.stopPropagation（）；}）
//d3.选择（'td'）。打开（'mouseover'，function（）{alert（“inside td”）}）
//d3.select（'table'）.on（'mouseout'，function（）{d3.event.stopPropagation（）；}）
d3.select（'tr'）.on（'mouseout'，function（）{d3.event.stopPropagation（）；}）
//d3.select（'td'）.on（'mouseout'，function（）{d3.event.stopPropagation（）；}）

无论您想对

和

元素执行什么操作，您都只能使用

对其中一个元素执行操作。选择，而我认为您需要。选择All

此外，指针事件是css属性，因此应使用.style
而不是.attr
-
查看这是否符合您的要求（事件仅在进入/离开表格时触发）-您可能不需要。stopPropagation
选择
d3.selectAll("tr").style("pointer-events", "none")
d3.selectAll("td").style("pointer-events", "none")

感谢您捕捉到这一点，但在我更改为selectAll后，事件仍会触发…您是否也将.attr更改为.style？