Question

我创建了一个视频库，根据元素的数据属性，通过swfobject加载Youtube视频。除了IE之外，它在所有浏览器中都运行良好。我所看到的奇怪行为没有意义。

每个缩略图的标记如下：

<li>
    <div class="movie-image">
        <a class="" data-videotitle="Title" data-videoid="$node.contribution('video')" href="http://www.youtube.com/watch?v=41ZskpgQqZ4">
            <img class="video-link" data-videotitle="Title" data-videoid="41ZskpgQqZ4" src="http://img.youtube.com/vi/41ZskpgQqZ4/default.jpg" alt="Title">
            <h5>Title</h5>
        </a>
    </div>
</li>

使用此javascript绑定事件：

$('.video-link').click(function(){
    player.setVideo(this.getAttribute("data-videoid"), true);
    player.setTitle(this.getAttribute("data-videotitle"));
    window.event.returnValue = false; //IESUX
    if(window.event.stopPropagation) window.event.stopPropagation();
    window.event.cancelBubble = true;
    //Yes, there's a lot of redundancy here. None has worked.
    return false;
})

现在，这是奇怪的部分：当我点击IE以外的任何浏览器中的链接时，该事件正常。

然而，在IE中，如果我点击h5元素，一切正常。但是，如果我单击图像，浏览器将导航到缩略图。这真的很奇怪，因为那甚至不是链接的目标。

编辑：我忘了提及，我在这个特定的网页上使用JQuery 1.4.2。

编辑2：嗯......废话。我只是试着把一个小提琴放在一起来展示这个问题，但这个小提琴工作得很好，即使使用旧版本的JQuery也是如此。

Answer 1

jQuery包装事件对象并为其提供的方法可以更好地完成您所做的事情：

$(".video-link").click(function (e) {
   player.setVideo(this.getAttribute("data-videoid"), true);
   player.setTitle(this.getAttribute("data-videotitle"));
   e.stopPropagation();
   e.preventDefault();
});

请注意return false被明确省略 - 您不需要它。

我的猜测是IE要么抛出某种错误来阻止JS执行并最终跟踪链接，要么默认操作没有被正确停止。

JQuery .click（）事件，在IE 8和9中非常奇怪的行为

1 个答案: