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

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框架）： 在此输入图像描述

Answer 1

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

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

根据规格：

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

如果embed元素未与嵌套浏览上下文相关联，请将该元素与新创建的嵌套浏览上下文相关联，[...]

将嵌套的浏览上下文导航到获取的资源，启用替换，并将embed元素的节点文档的浏览上下文作为源浏览上下文。 （如果浏览上下文进一步导航到其他位置，则不会更新embed元素的src属性。）

embed元素现在表示其关联的嵌套浏览上下文。

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

然而，似乎当它的src被设置并返回一些东西时，事件被新的上下文捕获（无论是到达还是创建）。

如果没有设置src，请参阅@Marius注释，它会触发事件。

Answer 2

我认为embed标签是沙盒的，不能从外部源访问。 只需使用img标签。

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

 img{ width: 200px; }

 <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">

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-04-04 17:11:14

解决方案2
1 2015-04-04 16:38:39

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-04-04 17:11:14

解决方案2 1 2015-04-04 16:38:39

解决方案1
2 已采纳 2015-04-04 17:11:14

解决方案2
1 2015-04-04 16:38:39