Javascript 只有在'；警报'；事先打电话

我需要一个特定的Javascript问题的帮助，这个问题我花了好几个小时才解决，现在又卡住了。我也是Javascript新手，有.NET背景

我的应用程序由单独的SVG文件中编码的小部件组成，这些文件包含用于操作小部件的内联JS函数（如旋转）。我想将这些SVG小部件从库弹出窗口拖放到主页上。我希望小部件位于单独的文件中，以便最终用户可以根据需要添加或删除小部件文件

SVG小部件作为对象动态添加到主页HTML中，我可以让对象显示出来，并且可以与SVG中的Javascript交互。我还动态更改包装SVG的SVG

标记的ID，以便能够唯一地标识页面上的小部件

我想使用HTML5的拖放功能，但是我不知道如何从传递到dragstart事件处理程序的事件对象中提取SVG id名称（这样我就可以将对象id保存在datatransfer对象中以备以后使用）。我知道您不能将事件附加到对象标记，因此我在SVG中的

标记上使用了一个ID，并且可以在拖动SVG对象时调用dragstart事件。有趣的是，如果我不动态添加SVG，我可以从

event.currentTarget.parentWindow.gID.ID

中提取

ID，但动态添加时，事件对象中的gID为null

更奇怪的是，如果我在更改SVG

标记的ID后添加了一个警报，那么我就可以从事件对象获取ID。因此，一定存在某种定时问题，但我不明白为什么，因为在我更改SVG的ID之前，使脚本工作的警报是。我还在SVG上使用加载事件，以确保在设置属性之前正确加载SVG

代码：

SVG

0

问题:

这里的计时错误是什么？如何避免

我还没有真正理解DOM，

event.currentTarget.parentWindow.gID.id

是从事件中提取唯一标识符的正确方法吗？（我假设我不能从HTML对象开始，必须进入SVG）

对象标记是使用Javascript包含外部SVG文件的最佳方式吗

虽然HTML5拖放应该可以工作，但是对于这种情况，我最好使用Jquery这样的库来支持拖放，还是通过mousedown/mouseup事件处理程序来实现手动拖放支持

我对JavaScript非常陌生，所以如果我在代码中还做了什么，请告诉我

---

当您尝试获取id（无警报）时，新的id尚未呈现。 因此，您需要在svgDialObj.addEventListener（“load”，function（）{in]之后添加代码 setTimeout在大约100毫秒后调用它

---

这应该可以解决问题。

谢谢Mukesh。有没有更同步的方法来等待更新“坚持”？在较慢的客户端上添加特定的延迟可能会很脆弱，也会给UI增加延迟。这是javascript中的典型情况，在呈现更改之前会有延迟？还是我可以等待“更改”事件？Marked作为答案，因为它确实如Mukesh所描述的那样工作。但是，我仍然对是否存在更改准备事件或类似事件感兴趣，这些事件可能比添加延迟更精确。延迟不会在这里产生任何问题。setTimeout只会在onload方法完成后执行，而不考虑指定的时间。请检查以下po是的，我将超时改为1毫秒，它仍然有效，只需要在setTimeout中添加修改SVG ID的代码。感谢链接，它帮助我理解javascript执行模型。我会对回复进行投票，但我对stackoverflow还是新手。

    var svgDialObj
    var svgDialDoc
    var svgDialWin
    window.onload = function () {               // Startup function after DOM is loaded 
            var object2 = document.createElement("object");
            object2.type = "image/svg+xml";
            object2.data = "dial.svg"
            object2.className = "widget"
            object2.id = "svgDial1";
            object2.draggable = "true"
            document.getElementById('container').appendChild(object2);
            svgDialObj = document.getElementById("svgDial1");
            svgDialObj.addEventListener("load", function () { // access properties once the file is loaded
                svgDialDoc = svgDialObj.contentDocument;
                var oldDialID = svgDialDoc.getElementById("svgDial");
                alert(oldDialID.id);    // EVENT OBJECT ONLY WORKS IF THIS ALERT IS INSERTED HERE
                oldDialID.setAttribute("id", "svgDial1");
                svgDialWin = svgDialDoc.defaultView;
                svgDialDoc.addEventListener('dragstart', drag_start, false);
            }, false);
        }

    function drag_start(event) {
        alert(event.currentTarget.parentWindow.gID.id);   // fails with null if I don't use the alert before setting the event handler
        event.dataTransfer.setData("text", event.currentTarget.parentWindow.gID.id + ',' + event.clientX + ',' + event.clientY);
    }

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" onload="startup(evt)">
   <g id="svgDial" transform="">
     <path id="seg1" fill="none" stroke="rgb(0, 134, 0)" d="M13.46,66.27 A40,40,0,0,1,10.1,52.79" stroke-width="20" />
     <path id="seg2" fill="none" stroke="rgb(50, 134, 0)" d="M10.01,50.7 A40,40,0,0,1,12.18,36.98" stroke-width="20" />
     <path id="seg3" fill="none" stroke="rgb(100, 134, 0)" d="M12.91,35.02 A40,40,0,0,1,20.27,23.23" stroke-width="20" />
     <path id="seg4" fill="none" stroke="rgb(150, 134, 0)" d="M21.72,21.72 A40,40,0,0,1,33.1,13.75" stroke-width="20" />
     <path id="seg5" fill="none" stroke="rgb(200, 134, 0)" d="M35.02,12.91 A40,40,0,0,1,48.6,10.02" stroke-width="20" />
     <path id="seg6" fill="none" stroke="rgb(255, 134, 0)" d="M50.7,10.01 A40,40,0,0,1,64.33,12.66" stroke-width="20" />
     <path id="seg7" fill="none" stroke="rgb(255, 100, 0)" d="M66.27,13.46 A40,40,0,0,1,77.79,21.23" stroke-width="20" />
     <path id="seg8" fill="none" stroke="rgb(255, 70, 0)" d="M79.25,22.72 A40,40,0,0,1,86.82,34.37" stroke-width="20" />
     <path id="seg9" fill="none" stroke="rgb(255, 35, 0)" d="M87.59,36.32 A40,40,0,0,1,90,50" stroke-width="20" />
     <path id="seg10" fill="none" stroke="rgb(255, 0, 0)" d="M89.95,52.09 A40,40,0,0,1,86.82,65.63" stroke-width="20" />
     <path id="needle" fill="rgb(100, 100, 100)" stroke="rgb(90, 90, 90)" stroke-width="2" d="M24.39,54.51 A26,26,0,1,1,27.48,63 l-20,4 Z" />
     <text id="numVal" x="34" y="58" fill="rgb(255, 255, 255)" style="font-family: 'Segoe UI'; font-size: 24px; text-align: center">0.0</text>
   </g>
 <script>
    <![CDATA[
     ...
     //]]>
 </script>
</svg>