1

我创建了一个视频库，它根据元素的数据属性通过 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。

4

1 回答 1

3

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 执行并最终跟随链接，要么默认操作没有正确停止。

于 2012-11-19T20:23:29.253 回答