如何只通过带有指针事件的SVG传递单击？
我有一个SVG用一个按钮覆盖一个div。我知道我可以通过为我的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");
}这个想法是在我按下鼠标按钮时禁用指针事件，并在我释放它时再次启用它们。
有人知道这个问题的解决办法或工作吗？谢谢!
回答 4
Stack Overflow用户
发布于 2015-02-02 19:54:07
我找到了解决问题的办法。可以使用elementFromPoint(x,y);函数遍历所有底层元素。我编写了一个帮助函数，它检查第一个选定的元素是否是SVG -如果是SVG，它的‘display’设置为"none“，下一个元素被选中。
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：
#website{
pointer-event: auto;
}
svg{
pointer-event: auto;
}在我的svg中，我添加了以下内容：
.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/en-US/docs/Web/API/document.elementFromPoint
谢谢你的其他方法！
Stack Overflow用户
发布于 2016-07-20 17:13:25
这里有一个更简单的解决方案:将pointer-events: none;保存在svg中，但是将pointer-events: fill添加到poligon、path或任何按钮中，这样，空空间是透明的，但是单击按钮是明智的。
Stack Overflow用户
发布于 2016-07-20 17:35:24
这里有一个方法，我给你举一个例子
body {
margin: 0;
}
.wrapper {
background-color: #e54d42;
height: 100%;
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.link {
cursor: pointer;
color: #eee;
font-family: Helvetica, Verdana;
font-weight: 100;
font-size: 40px;
}
.link:hover {
color: #e59a95;
}
.mask {
position: absolute;
top: 0;
width: 100%;
right: 0;
}
.mask {
pointer-events: none;
}
.svg-not-transparent {
pointer-events: fill;
cursor: pointer;
}
.svg-not-transparent:hover {
fill: #333;
}<div class="wrapper">
<a class="link">En: I am reacheable even if there is a big SVG omer me <br>But not over the SVG shape<br>Esp: Puedes darme click aún cuándo hay un SVG sobre mi.<br>Pero no sobre el poligono</a>
<svg version="1.1" class="mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1980 1320" style="enable-background:new 0 0 1980 1320;" xml:space="preserve">
<polygon class="svg-not-transparent" points="1277.7,0 567.8,1337.5 1980,1337.5 1980,0 "/>
</svg>
</div>
：http://codepen.io/jesuscmd/pen/EyEyoP
https://stackoverflow.com/questions/28282811
复制相似问题
腾讯云开发者
