javascript - 如果事先调用了 'alert'，则只能在事件中读取动态添加的 SVG 对象的更改 ID

Question

我需要帮助解决一个特定的 Javascript 问题，我花了几个小时解决这个问题，但现在陷入困境。我也是 Javascript 新手，并且有 .NET 背景。

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

SVG 小部件作为对象动态添加到主页 HTML，我可以获取要显示的对象，并且可以与 SVG 中的 Javascript 进行交互。我还动态更改 SVG <g> 的 ID包装 SVG 的标签，以便我可以唯一地标识页面上的小部件。

我想使用 HTML5 拖/放功能，但是我不知道如何从传递到 Dragstart 事件处理程序的事件对象中提取 SVG id 名称(因此我可以将对象 id 保存在稍后使用的数据传输对象)。我知道您无法将事件附加到对象标签，因此我在 <g> 上使用 ID SVG中的标签，并且可以在拖动svg对象时调用dragstart事件。有趣的是，如果我不动态添加 SVG，我可以提取 <g> ID来自event.currentTarget.parentWindow.gID.id但动态添加时，事件对象中的 gID 为 null。

更奇怪的是，如果我在更改 SVG ID <g> 后添加警报标签然后我可以从事件对象获取ID。所以一定存在某种计时问题，但我不明白为什么，因为使脚本工作的警报是在我更改 SVG <g> 的 ID 之前。 。我还在 SVG 上使用加载事件，以确保在设置属性之前正确加载 SVG。

代码:

    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

 <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>

问题:

1. 我这里遇到的计时错误是什么以及如何避免它？

2. 我还不太了解 DOM - 是 event.currentTarget.parentWindow.gID.id从事件中提取唯一标识符的正确方法？ (我假设我无法从 HTML 对象中获取数据，而必须访问 SVG)

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

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

5. 我对 JavaScript 很陌生，所以如果我在代码中做了任何其他愚蠢的事情，请告诉我。

Answer 1

当您尝试获取 id(没有警报)时，新的 id 尚未呈现。所以你需要在 svgDialObj.addEventListener("load", function () { 之后添加代码setTimeout 在 100 毫秒左右后调用它。

这应该可以解决问题。