如何仅通过带有指针事件的SVG传递点击? [英] How can I pass ONLY clicks through a SVG with pointer-events?
问题描述
我有一个SVG，它在div上覆盖了一个按钮.我知道我可以通过设置"pointer-events:none;"将鼠标事件传递给SVG.为我的SVG.但是，当我这样做时，SVG将不再识别鼠标事件.
I have a SVG overlaying a div with a button. I know that i can pass mouse-events through the SVG by setting "pointer-events: none;" for my SVG. However when I do this the SVG wont recognize mouse-events anymore.
<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能够在鼠标悬停在其上方时将其识别，但会将点击传递到其下方的元素(div/按钮/...). 因此，我的SVG应该仅是悬停事件的目标，而我的按钮应该是单击事件的目标.
I want my SVG to be able to recognize when the mouse is over it but pass clicks to elements (divs/ buttons / ...) underneath itself. So my SVG should only be the target of hover-events and my button should be the target of click-events.
在其他一些方法中，我尝试过这样的方法:-无效.
Among some other approaches I tried it like this: - Nothing worked.
.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");
}
这个想法是当我按下鼠标按钮时禁用指针事件，并在释放它时再次启用它们.
The idea was to disable pointer-events when I press the mouse-button and enable them again when I release it.
有人知道这个问题的解决方案或解决方法吗? 谢谢！
Does anyone know a solution or work-arround for this problem? Thanks!
推荐答案
我找到了解决问题的方法.可以使用elementFromPoint(x,y);函数遍历所有基础元素.我编写了一个辅助函数，用于检查第一个选定元素是否为SVG-如果为SVG，则将其显示设置为无"，然后选择下一个元素.
I found a solution to my problem. It is possible to traverse through all underlying elements with the elementFromPoint(x,y); function. I wrote a helper-function that checks if the first selected element is a SVG - if it is one its' display is set to "none" and the next element is selected.
function get_element_under_svg(x,y){
var resulting_element;
var first_element = document.elementFromPoint(x,y);
//check if first_element is a svg
if (first_element.nodeName == "rect") {
_display = first_element.style.display; //save display of svg
first_element.style.display = "none"; // make svg invisible
resulting_element = document.elementFromPoint(x,y);
first_element.style.display = _display; // reset display
} else {
resulting_element = first_element;
}
return resulting_element;
}
return lower_element;
}
最后，我为SVG和div设置了pointer-events: auto:
At the end of the day I set pointer-events: auto for my SVG and for my div:
#website{
pointer-event: auto;
}
svg{
pointer-event: auto;
}
在我的svg中，添加了以下内容:
And to my svg I added the following:
.on("click", function(d,i) {
var element = get_element_under_rect( mouse.x, mouse.y );
element.click(); // simulate click on the underlying element
});
通过这种方法，我的SVG仍然能够接收悬停或点击事件，同时能够将点击传递给基础元素. 另请参见 https://developer.mozilla.org/zh-CN/docs/Web/API/document.elementFromPoint
With this approach my SVG is still capable to receive hover- or click-events, while it is able to pass clicks to underlying elements. See also https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint
感谢其他方法！
这篇关于如何仅通过带有指针事件的SVG传递点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
