Question

<span style="display:inline-block; width:40px; height:40px;  border:red solid thin; "><svg ><script type="application/ecmascript">     function circle_click1(evt) {
  alert("red");
}</script><defs>
 <clipPath id="clipPath">
      <rect x="15" y="15" width="40" height="40" />
  </clipPath> </defs><circle  onclick="circle_click1(evt)" cx="25" cy="25" r="20" style="fill: red; clip-path: url(#clipPath); " /></svg></span><span style="display:inline-block; width:40px; height:40px; position: relative; left:-20px; border:blue solid thin; "><svg> <script> function circle_click2(evt) {
  alert("blue");
}</script><defs>
  <clipPath id="clipPath2">
      <rect x="15" y="15" width="40" height="40" />
  </clipPath>  </defs>  <circle onclick="circle_click2(evt)" cx="25" cy="25" r="20"
      style="fill: blue; clip-path: url(#clipPath2); " />

我使用上面的代码显示两个svg圆圈，一个是红色，另一个是蓝色，每个圆圈有一个跨度容器，一个跨度与另一个跨度重叠。如何使蓝色矩形跨度下的红色圆圈有鼠标事件？

如何将事件传递给具有较低层的元素

0 个答案: