javascript - 为什么 Internet Explorer 不喜欢我的点击事件？

Question

这是有史以来最奇怪的事情。我有

<div class="button-holder">
    <button id="video-play">Play Interactive Video</button>
    <script type="text/javascript">
        $(function () {
            $('#video-play').click(function(){
                var id = "ssvid", src = "assets/Cisco_SmartStack_Interactive_04192016.mp4", type = "video/mp4";
                var source = document.createElement('source');
                source.src = src;
                source.type = type;
                var video = document.getElementById(id);
                video.appendChild(source);
                window.VidHandler = new VideoHandler(id, src, type);
                VidHandler.PlayFromBeginning();
                $(this).remove();
            });
        });
    </script>
</div>

在 FF 和 Chrome 上一切正常，但在 IE 中，第一次单击时，我得到

InvalidStateError

并且该元素不会被删除，且 VideoHandler 内的事件函数无法正确触发。再次按下后，它就按预期工作了。

Answer 1

嗯，这可能是因为您正在向文档添加元素，然后在添加元素之前尝试与它们进行交互。我相信我见过 Firefox 和 Chrome 在这样的情况下就像在使用多个线程一样，而 IE 将在更新 DOM 之前处理您的点击处理程序中的所有内容。

尝试添加元素，然后将您的操作放入 setTimout 函数中与这些元素进行交互，如下所示:

$('#video-play').click(function(){
         var id = "ssvid", src = "assets/Cisco_SmartStack_Interactive_04192016.mp4", type = "video/mp4";
         var source = document.createElement('source');
         source.src = src;
         source.type = type;
         var video = document.getElementById(id);
         video.appendChild(source);
         setTimeout(function(){ 
            window.VidHandler = new VideoHandler(id, src, type);
            VidHandler.PlayFromBeginning();
            $(this).remove();
         }, 100);
 });

这样做将使您的 DOM 只需几分之一秒的时间即可更新。