d3可以将鼠标悬停事件传递给下面的层吗？
d3可以将鼠标悬停事件传递给下面的层吗？
提问于 2019-03-15 06:43:56
我在这里试着理解一些东西：
我有两个相叠的长方形。底部的矩形正在侦听“mouseover”事件。这个矩形的一半被另一个矩形覆盖。
将鼠标移到第一个矩形上时，将触发mouseover事件。将鼠标移到顶部的第二个矩形上时，不会触发鼠标悬停事件。
有没有办法“告诉”第二个矩形“传递”鼠标悬停事件到底部(第一个)呢？
下面是我的例子：
<!DOCTYPE html>
<meta charset="utf-8">
<body>
</body>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// 2. Use the margin convention practice
var margin = {top: 50, right: 50, bottom: 50, left: 50}
, width = window.innerWidth - margin.left - margin.right // Use the window's width
, height = window.innerHeight - margin.top - margin.bottom; // Use the window's height
// 1. Add the SVG to the page and employ #2
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// first rectangle with mouse event listener
const first_layer = svg.append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height).attr('fill', '#ff0000').on('mouseover', () => {
console.log(d3.event.x)
});
// second rectangle covering half of the first rectangle, blocking the mouse event
const second_layer = svg.append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height / 2).attr('fill', '#0000ff');
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-15 08:41:06
如果我们没有对任何与鼠标相关的事件使用second_layer，我们可以将它的pointer-events属性设置为none。这将防止它对任何指针事件做出反应。只需将.style('pointer-events', 'none')链接到second_layer，就可以了。
const second_layer = svg.append('rect').attr('x', 0).attr('y', 0).attr('width', width).style('pointer-events', 'none')......;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55173104
复制相关文章
相似问题