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只需几分之一秒即可完成更新。

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

1 个答案: