blocks|key|3544628|text|您可以禁用SVG上的指针事件，但是添加另一个大小相同的div，它是SVG和表单的透明父级。然后，您可以监听透明父节点上的悬停事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3544629|​|3544630|var+btn+=+document.getElementById("btn");
var+container+=+document.getElementById("container");

container.addEventListener("mouseover",+function()+{
++log("SVG+mouse+over");
},+true);
container.addEventListener("mouseout",+function()+{
++log("SVG+mouse+out");
},+true);

btn.addEventListener("click",+function()+{
++log("BTN+click");
},+false);

var+out+=+document.getElementById("out");

function+log(s)+{
++out.innerHTML+%2B=+s+%2B+"<br>";
}|code-block|syntax|javascript|3544631|#container+{
++position:+relative;
++width:+300px;
++height:+100px;
}
#svgOverlay+{
++position:+absolute;
++top:+0;
++left:+0;
++bottom:+0;
++right:+0;
++pointer-events:+none;
}
#out+{
++width:+200px;
++height:+300px;
++overflow:+auto;
++border:+1px+solid+gray;
++position:+absolute;
++top:+160px;
}|3544632|<body>
++<div+id="container">
++++<div+id="website">
++++++<form+action="input_button.htm">
++++++++<textarea+cols="20"+rows="4"+name="text"></textarea>
++++++++<input+type="button"+name="Text+1"+value="show+text"+onclick="this.form.text.value='Test'"+id="btn"></input>
++++++</form>
++++</div>
++++<svg+id="svgOverlay"+width="300"+height="100">
++++++<rect+width="100%25"+stroke="black"+height="100%25"+fill="gray"+id="r0"+opacity=".5"></rect>
++++</svg>
++</div>
++<div+id="out"></div>
</body>|3544633|3544634|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You could disable pointer events on the SVG, but add another div of the same size that is a transparent parent of both the SVG and the form. You could then listen to the hover events on the transparent parent:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.getElementById("btn");
var container = document.getElementById("container");

container.addEventListener("mouseover", function() {
  log("SVG mouse over");
}, true);
container.addEventListener("mouseout", function() {
  log("SVG mouse out");
}, true);

btn.addEventListener("click", function() {
  log("BTN click");
}, false);

var out = document.getElementById("out");

function log(s) {
  out.innerHTML += s + "&lt;br&gt;";
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  position: relative;
  width: 300px;
  height: 100px;
}
#svgOverlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
#out {
  width: 200px;
  height: 300px;
  overflow: auto;
  border: 1px solid gray;
  position: absolute;
  top: 160px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="container"&gt;
    &lt;div id="website"&gt;
      &lt;form action="input_button.htm"&gt;
        &lt;textarea cols="20" rows="4" name="text"&gt;&lt;/textarea&gt;
        &lt;input type="button" name="Text 1" value="show text" onclick="this.form.text.value='Test'" id="btn"&gt;&lt;/input&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;svg id="svgOverlay" width="300" height="100"&gt;
      &lt;rect width="100%" stroke="black" height="100%" fill="gray" id="r0" opacity=".5"&gt;&lt;/rect&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  &lt;div id="out"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|716612|text|我找到了解决问题的办法。可以使用elementFromPoint(x,y);函数遍历所有底层元素。我编写了一个帮助函数，它检查第一个选定的元素是否是SVG+-如果是SVG，它的‘display’设置为"none“，下一个元素被选中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|716613|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;
}|code-block|syntax|javascript|716614|最后，我为SVG和div设置了pointer-events:+auto：|716615|#website{
++pointer-event:+auto;
}
svg{
++pointer-event:+auto;
}|716616|在我的svg中，我添加了以下内容：|716617|.on("click",+function(d,i)+{
++var+element+=+get_element_under_rect(+mouse.x,+mouse.y+);
++element.click();+//+simulate+click+on+the+underlying+element
});+|716618|使用这种方法，我的SVG仍然能够接收悬停--或单击--事件，同时它能够将单击传递给基础元素。另见https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint|716619|谢谢你的其他方法！|716620|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint^0|G|M|0|0|F|K|0|0|0|0|1C|22|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|U|3|V|5|6|7|1I|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<p>I found a solution to my problem. It is possible to traverse through all underlying elements with the <code>elementFromPoint(x,y);</code> 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.</p>

<pre><code>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;
}
</code></pre>

<p>At the end of the day I set <code>pointer-events: auto</code> for my SVG and for my div:</p>

<pre><code>#website{
  pointer-event: auto;
}
svg{
  pointer-event: auto;
}
</code></pre>

<p>And to my svg I added the following:</p>

<pre><code>.on("click", function(d,i) {
  var element = get_element_under_rect( mouse.x, mouse.y );
  element.click(); // simulate click on the underlying element
}); 
</code></pre>

<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint</a></p>

<p>Thanks for the other approaches!</p>


blocks|key|716633|text|这里有一个更简单的解决方案:将pointer-events:+none;保存在svg中，但是将pointer-events:+fill添加到poligon、path或任何按钮中，这样，空空间是透明的，但是单击按钮是明智的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|716634|https://stackoverflow.com/a/29319009/2594391|716635|entityMap|0|LINK|mutability|MUTABLE|url^0|F|L|1B|K|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>Here is a easier solution:
Keep   <code>pointer-events: none;</code> in the svg, but add <code>pointer-events: fill</code> to the poligon, path or whatever your button is, with this, the empty space is transparente, but the button is sensible to click</p>

<p><a href="https://stackoverflow.com/a/29319009/2594391">https://stackoverflow.com/a/29319009/2594391</a></p>


blocks|key|3544700|text|这里有一个方法，我给你举一个例子|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3544701|​|3544702|body+{
++margin:+0;
}

.wrapper+{
++background-color:+#e54d42;
++height:+100%25;
++width:+100%25;
++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%25;
++right:+0;
}

.mask+{
++pointer-events:+none;
}

.svg-not-transparent+{
++pointer-events:+fill;
++cursor:+pointer;
}
.svg-not-transparent:hover+{
++fill:+#333;
}|code-block|syntax|javascript|3544703|<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>|3544704|3544705|：http://codepen.io/jesuscmd/pen/EyEyoP|offset|length|3544706|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/jesuscmd/pen/EyEyoP^0|0|0|0|0|0|1|11|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>Here there is a way, I give you an example</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;a class="link"&gt;En: I am reacheable even if there is a big SVG omer me &lt;br&gt;But not over the  SVG shape&lt;br&gt;Esp: Puedes darme click aún cuándo hay un SVG sobre mi.&lt;br&gt;Pero no sobre el poligono&lt;/a&gt;
  &lt;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"&gt;
					&lt;polygon class="svg-not-transparent" points="1277.7,0 567.8,1337.5 1980,1337.5 1980,0 "/&gt;
  &lt;/svg&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>: <a href="http://codepen.io/jesuscmd/pen/EyEyoP" rel="nofollow">http://codepen.io/jesuscmd/pen/EyEyoP</a></p>


<p>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.</p>

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

<p>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.</p>

<p>Among some other approaches I tried it like this: - Nothing worked.</p>

<pre><code>.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");
}
</code></pre>

<p>The idea was to disable pointer-events when I press the mouse-button and enable them again when I release it.</p>

<p>Does anyone know a solution or work-arround for this problem?
Thanks!</p>


How can I pass ONLY clicks through a SVG with pointer-events?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个SVG用一个按钮覆盖一个div。我知道我可以通过为我的SVG设置“指针-事件:无；”通过SVG传递鼠标事件。然而，当我这样做时，SVG将不再识别鼠标事件。<body>  <div id="website">    <form action="input_button.htm">      <p>        ...

问如何只通过带有指针事件的SVG传递单击？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何只通过带有指针事件的SVG传递单击？EN