我有一个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)
这个想法是当我按下鼠标按钮时禁用指针事件,并在释放它时再次启用它们。
有人知道这个问题的解决方案或解决方案吗?谢谢!