无法将mousedown事件附加到嵌入元素

我似乎已经用这种垃圾撞到墙上，无法理解它。我有一个带有相对复杂的SVG的页面（它嵌入了6个其他小型的SVG），嵌入embed标签内。当我尝试附加mousedown事件时，它根本不起作用。下面是标记：无法将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

来源

2015-04-04 Megakoresh

控制台说什么？ – Rooster 2015-04-04 16:06:55

适用于我，无需jQuery - http://jsbin.com/bosaqadebe/1/edit?html,css,js,console,output – Marius 2015-04-04 16:32:22

控制台不会说任何东西。它根本不附加事件。 – Megakoresh 2015-04-04 16:35:32

如果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的 browsing context为source browsing context。（该src属性的的embed元素没有得到，如果浏览器上下文得到进一步导航到其他位置更新）。

的embed元素现在represents其相关nested browsing context。

但我不能找到它实际上应该如何处理事件的任何东西。

尽管如此，看起来当它的src被设置并返回一些东西时，事件被新的上下文捕获（无论是达到还是创建）。

查看@Marius comment进行演示，当没有设置src时，它触发事件。

来源

2015-04-04 17:11:14 Kaiido

这看起来已经做了一些事情（至少事件正在触发），但是它在整个方块形状上被触发，而我的SVG图像是圆形的，我不希望用户点击空白空间，仍然有应用程序认为他们点击图像。有没有一种方法来改进这种方法，使其像正常文档中的行为一样？对不起，如果答案是在规格中，它们写得很糟糕，这对于刚刚接触这个主题的人来说是难以理解的。如果没有办法改善它，我会接受这个答案。 – Megakoresh 2015-04-04 19:47:30

'use'元素的'getSVGElement（）'方法返回内部svg的文档。从那里，你可以用你喜欢访问您的SVG元素（如'getElementById'或'querySelector' ...） – Kaiido 2015-04-04 19:53:04

很好任何DOM方法，看起来这是我唯一能做的，谢谢！ – Megakoresh 2015-04-04 19:57:14

我认为嵌入标签是沙箱，不能从外部来源访问。只需使用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">

来源

2015-04-04 16:38:39

我不能，我试过。 SVG通过svg'image'标签嵌入了其他SVG，当我使用'img'标签加载主svg时，这些标签不显示。完全没有办法做到这一点？ – Megakoresh 2015-04-04 16:44:10

我不这么认为，但我不确定。我对SVG很少有经验。 – 2015-04-04 16:47:21

无法将mousedown事件附加到嵌入元素

回答

相关问题