Question

我想在这里理解一些东西

我彼此之间有两个矩形。底部矩形正在侦听“鼠标悬停”事件。此矩形的一半被另一个矩形覆盖。

将鼠标移到第一个矩形上，将触发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>

Answer 1

如果我们没有将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')......;

d3是否可以将鼠标悬停事件传递到其下的图层？

1 个答案: