Question

我在HTML文档的对象元素中有一个svg图像。

<object id="svg1" data="nejc/bg.svg" type="image/svg+xml">
Your browser doesn't support SVG
</object>

我有javascript代码。在里面我添加了点击事件，当svg完成加载时执行。代码在.svg文件中查找我在元素组中添加的id。一切正常。但我现在有问题，当我加载页面时，svg元素无法点击，但如果我刷新它然后点击工作正常。

$( document ).ready(function() {

    //button where are you
    var a = document.getElementById("svg1");

    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
    a.addEventListener("load",function(){
        var svgDoc = a.contentDocument; //get the inner DOM of svg
        var delta = svgDoc.getElementById("right"); //get the inner element by id
        delta.addEventListener("click",function(){
                this.style.fill = '#DC7827';
                 setTimeout("document.location.href = '_mobile_whereareyou.php';",200);

        },false);    //add behaviour
    },false);

    //button place ID
    var b = document.getElementById("svg1");

    //it's important to add an load event listener to the object, as it will load the svg doc asynchronously
    b.addEventListener("load",function(){
        var svgDocB = b.contentDocument; //get the inner DOM of svg
        var beta = svgDocB.getElementById("left"); //get the inner element by id
        beta.addEventListener("click",function(){
                this.style.fill = '#DC7827';
                setTimeout("document.location.href = '_mobile_placeID.php';",200);

        },false);    //add behaviour
    },false);

  });

我猜测，当无法点击svg元素时，svg图像无法正确加载。是否有任何方法可以确保加载svg元素并且单击是否有效？

Answer 1

我想我来解决了。我认为svg在点击不起作用时没有正确加载。所以我把下面的所有代码都删掉了。

$('#svg1').load('nejc/bg.svg', null, function() { 
//here is now my code given in question
});

此函数加载svg和on complete执行功能代码。

SVG在JS中的click事件的对象问题

1 个答案: