javascript - 如何通过带有指针事件的 SVG 仅传递点击？

标签 javascript css svg click pointer-events

我有一个 SVG，上面有一个带有按钮的 div。我知道我可以通过设置“pointer-events: none;”来通过 SVG 传递鼠标事件。对于我的 SVG。但是，当我这样做时，SVG 将不再识别鼠标事件。

<body>
  <div id="website">
    <form action="input_button.htm">
      <p>
        <textarea cols="20" rows="4" name="text"></textarea>
        <input type="button" name="Text 1" value="show text" 
         onclick="this.form.text.value='Test'">
      </p>
    </form>
  </div>
  <div id="svgRect">
    <svg width="1845" height="140">
      <rect id="r0"></rect>
    </svg>
  </div>
</body>

我希望我的 SVG 能够识别鼠标何时位于其上，但将点击传递给其下方的元素(divs/按钮/...)。所以我的 SVG 应该只是悬停事件的目标，而我的按钮应该是点击事件的目标。

在其他一些方法中，我尝试过这样的方法:- 没有任何效果。

.on("mousedown", function(d,i){
   d3.select("#r0")
     .style("pointer-events", "none");
   d3.select("#website")
     .style("pointer-events", "auto");}
.on("mouseup", function(d,i){
   d3.select("#r0")
     .style("pointer-events", "auto");
   d3.select("#website")
     .style("pointer-events", "none");
}

我的想法是在我按下鼠标按钮时禁用指针事件，并在我释放鼠标按钮时再次启用它们。

有谁知道这个问题的解决方案或解决方法？谢谢!

最佳答案

这是一个更简单的解决方案: 将 pointer-events: none; 保留在 svg 中，但将 pointer-events: fill 添加到多边形、路径或任何你的按钮，有了这个，空白区域就是透明，但按钮可以点击

https://stackoverflow.com/a/29319009/2594391

关于javascript - 如何通过带有指针事件的 SVG 仅传递点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28282811/