相关疑难解决方法(0)

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

我有一个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>
Run Code Online (Sandbox Code Playgroud)

我希望我的SVG能够识别鼠标何时位于其上方,但将点击传递到其下方的元素(div /按钮/ ...)。因此,我的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");
}
Run Code Online (Sandbox Code Playgroud)

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

有人知道这个问题的解决方案或解决方案吗?谢谢!

javascript css svg click pointer-events

4
推荐指数
2
解决办法
5574
查看次数

标签 统计

click ×1

css ×1

javascript ×1

pointer-events ×1

svg ×1