Question

我有一个绑定到div元素的click事件，在这个div中我使用iframe嵌入一个SVG文件（我尝试过使用object / embed元素，结果是相同的），如下所示：< / p>

<div id="example">
 <iframe src="example.svg" type="image/svg+xml" width="100%" height="100%"></iframe>
</div>

当我添加iframe元素时，它的父母点击事件不再触发。

如果我将SVG嵌入IMG元素中，一切正常，但svg缩放不再正常工作。

这是否有优雅的解决方法？

提前致谢。

Answer 1

您可以尝试屏蔽iframe

<html>
  <head>
    <style type="text/css">
      #wrapper {
        width:1000px;
        height:600px;
        position:relative;
      }
      #wrapper:after {
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:2;
      }
    </style>
  </head>
  <body>
    <div id="wrapper" onclick="alert('hi mondo');">
      <iframe src="harvest.svg" type="image/svg+xml" frameborder="0"
              style="width:100%;height:100%;"></iframe>
    </div>
  </body>
</html>

此解决方案的问题是上下文菜单不再与图像相关。

嵌入式iframe可防止父div上的click事件。任何解决方法？

1 个答案: