javascript - 对象 HTML 标记上的 Onclick 事件不起作用,解决方法?
问题描述
所以我有一个通过<object>
标签导入的 SVG,它onclick="functionName();
附有一个,但它似乎不起作用。所以我尝试在 SVG 中添加以下脚本:
<svg tag here etc
<defs>
<script type="text/javascript">
<![CDATA[
document.addEventListener('click', test());
]]>
</script>
<linearGradient id="bbc50e5b-4734-4535-94bd-b30475bdd571" data-name="Testingspace" x1="15" y1="310" x2="320" y2="5" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ccc"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
</defs>
the rest of SVG here
我的 HTML:
<object id="sidebartoggle" data="graphics/test.svg" type="image/svg+xml" onclick="toggleSidebar();" style="top:50%;right:1%;position:fixed;display:flex;justify-content:flex-end;width:500px;transform: translateX(99%); z-index:9999999;" >
</object>
...但它根本不起作用。这里需要什么解决方法?我应该怎么做才能实现我的目标 - 在 SVG 上绑定一个单击事件,该事件从 JS 文件执行一个函数。
解决方案
onclick 事件不会绑定到您的对象,因为您实际上是在单击/定位对象的内部内容(svg DOM)。
作为一种解决方法,您可以将 csspointer-events:none
应用于您的对象元素并将您的点击事件绑定到辅助包装元素。
function toggleSidebar(){
console.log('clicked');
}
.svg-wrp{
cursor:pointer;
}
.svgObject{
display:inline-block;
font-size:36px;
width:1em;
height:1em;
background-color:transparent;
border:1px solid red;
}
<h3>css: "pointer-events:none" – click enabled</h3>
<div class="svg-wrp" onclick="toggleSidebar()" >
<object class="svgObject" id="sidebartoggle01" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' class='cross'%3E%3Cpolygon fill='grey' points='11.649 9.882 18.262 3.267 16.495 1.5 9.881 8.114 3.267 1.5 1.5 3.267 8.114 9.883 1.5 16.497 3.267 18.264 9.881 11.65 16.495 18.264 18.262 16.497'/%3E%3C/svg%3E" type="image/svg+xml" style="pointer-events:none" ></object>
</div>
<h3>Original <object> – click event is not available</h3>
<div class="svg-wrp" onclick="toggleSidebar()" >
<object class="svgObject" id="sidebartoggle01" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' class='cross'%3E%3Cpolygon fill='grey' points='11.649 9.882 18.262 3.267 16.495 1.5 9.881 8.114 3.267 1.5 1.5 3.267 8.114 9.883 1.5 16.497 3.267 18.264 9.881 11.65 16.495 18.264 18.262 16.497'/%3E%3C/svg%3E" type="image/svg+xml" ></object>
</div>
编辑:<script>
svg中的标签
你可以做这个MDN 示例
但是你会遇到范围问题。
如果您需要通过单击 svg 元素来调用全局定义的函数,您可以在加载对象后添加一个 eventListener。
SVG
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<script>
// <![CDATA[
window.addEventListener('DOMContentLoaded', () => {
function getColor () {
const R = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const G = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const B = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
return `#${R}${G}${B}`
}
document.querySelector('rect').addEventListener('click', (e) => {
e.target.style.fill = getColor()
})
})
// ]]>
</script>
<rect id="bg" width="100%" height="100%" fill="#ccc"></rect>
</svg>
html
<object class="svgObject" id="sidebartoggle" data="script.svg" type="image/svg+xml" ></object>
js
function test(){
console.log('test')
}
var svgObject = document.getElementById("sidebartoggle");
// get svg content
svgObject.addEventListener("load",function(){
// get the inner DOM of svg
var svgDoc = svgObject.contentDocument;
var bg = svgDoc.querySelector('#bg');
// bind click event
bg.addEventListener('click', function(e){
test();
});
});
然而,添加到 svg 文件的脚本在某些环境(例如 wordpress)中也可能被认为是可疑的。一些文件清理过滤器会从 svg 中去除脚本标签。
推荐阅读
- c# - 如何在 ApiController 的方法中获取所有请求头列表
- python - 展平包含列表和元组列表的字典
- dax - DAX - 对多列中具有最新日期的行求和
- docker - 反向代理 Nginx 不代理
- django - docker 中的应用程序有不同的基础镜像
- pyspark - 使用特定条件更新数据框
- flutter - 如何在颤动中制作响应式播放按钮?
- twos-complement - 了解二进制补码和一个补码
- ruby-on-rails - Heroku + Sidekiq + Redis + Puma 配置问题
- mysql - {"timestamp": 1567422726395,"status": 404,"error": "Not Found","message": "No message available","path": "/SpringRestfulWebServiceHibernate/add/" }