Question

我似乎已经用这个垃圾撞墙了，无法理解它。我有一个页面包含一个相对复杂的SVG（它嵌入了6个其他小的SVG）嵌入embed标签内。当我尝试将mousedown事件附加到其中时，它根本不起作用。这是标记：

<body>
<embed type="image/svg+xml" src="images/cog.svg" id="cog">
</embed>
</body>

然后在javascript中我做

$(function(){  
  var cog = document.getElementById("cog");
  document.addEventListener('mousedown', function(e){
    console.log(e);
  });
});

它不起作用。此外，当我将事件附加到document时，当我点击该嵌入对象时它们也不会触发！我搜索了这个东西3个小时，到处看，看起来似乎嵌入应该支持mousedown，即使没有任何问题。这里有什么问题？编辑：如果它有任何帮助，那么完整标记是什么样的（我使用Foundation框架）： enter image description here

Answer 1

如果CORS不是问题，您可以尝试：

document.querySelector('embed').addEventListener('load', function(){
    this.getSVGDocument().addEventListener('mousedown', function(){
        alert('hello')});
        });

根据the specs：

3。如果上一步确定内容的类型是   image/svg+xml，然后运行以下子步骤：



如果embed元素未与nested browsing context相关联，请将该元素与新创建的nested browsing context相关联，[...]



Navigate嵌套浏览上下文到获取的资源，replacement enabled以及embed元素node document＆＃39; s   browsing context为source browsing context。（src属性   如果浏览上下文获得，则embed元素不会更新   进一步导航到其他地方。）



现在embed元素represents与之关联nested browsing context。

但我无法找到关于它应该如何处理事件的任何事情。

然而，似乎当设置src并返回某些内容时，事件将被新上下文捕获（无论是到达还是创建）。

如果没有设置src，请参阅@Marius comment以获取演示，它会触发事件。

Answer 2

我认为embed标记是沙盒的，无法从外部源访问。只需使用img代码。

＆＃13;

$('#logo').click(function() {
  alert('410');
});

＆＃13;

img{
  width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Click the SVG</h3>
<img id='logo' src="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg">

＆＃13;

无法将mousedown事件附加到embed元素

2 个答案: