如何将 JavaScript onClick 处理程序添加到嵌入的 html 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3156303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add JavaScript onClick handler to an embedded html object?
提问by Hyman Roscoe
I'm trying to add an onClick handler to an embedded object. The handler needs to execute a function which is in an external .js file which is linked to the current html file via <script src="....
我正在尝试向嵌入对象添加一个 onClick 处理程序。处理程序需要执行外部 .js 文件中的函数，该文件通过 .js 链接到当前 html 文件<script src="...。
Do I need to reference the function differently due to it being located elsewhere?
由于它位于其他地方，我是否需要以不同的方式引用该函数？
Here is the code as it currently stands (which does not work, but also does not produce any errors):
这是目前的代码（不起作用，但也不会产生任何错误）：
<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53"
type="image/svg+xml" onClick="buttonEvent('buttonClicked')"/>
回答by Mario Menger
You have to implement onclick insidethe svg and link it to the external JavaScript function using javascript inside the svg. See the SVG wiki for examples.
您必须在 svg内实现 onclick并使用 svg 内的 javascript 将其链接到外部 JavaScript 函数。有关示例，请参阅 SVG wiki。
Update: Apparently the SVG wiki is no more. No surprise that the best references I can now (quickly) find are on StackOverflow itself.
更新：显然 SVG wiki 已不复存在。毫不奇怪，我现在可以（快速）找到的最佳参考文献是 StackOverflow 本身。
This answer describes how to implement onclick inside the svg.
回答by Jaroslav Jandek
Use either javascript binding (Mario Mengeranswered that already).
使用任一 javascript 绑定（Mario Menger已经回答了）。
If you can't or won't use the binding, you can use what xil3answered with one modification:
如果你不能或不会使用绑定，你可以使用xil3回答的一个修改：
Use an empty anchor tag <a href="javascript:someFunc()"></a>as the click consumer. Set it's z-index and position/size so it positioned over the svg object (for cross-browser compatibility).
使用空锚标记<a href="javascript:someFunc()"></a>作为点击消费者。设置它的 z-index 和位置/大小，使其位于 svg 对象上（为了跨浏览器兼容性）。
回答by Tosin Asonibare
If you wanted to call a method from the embedded object you could do something like this, Have the following as your embedsrc.html:
如果你想从嵌入的对象调用一个方法，你可以做这样的事情，将以下内容作为你的 embedsrc.html：
<img src="svg/button.svg" width="95" height="53"
onClick="window.parent.buttonEvent('buttonClicked')"/>
and then have this in your main html:
然后在你的主 html 中有这个：
<embed src="embedsrc.html" width="95" height="53"> </embed>
<script type='text/javascript'>
function buttonEvent(input){alert(input);}
</script>
回答by Tom Gullen
Onclick should all be lowercase.
Onclick 应该都是小写的。
<embed src="svg/button.svg" id="buttonEmbed" width="95" height="53"
type="image/svg+xml" onclick="alert('hello!');"/>
