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 要素をクリックすると、すべて正常に動作します。ただし、画像をクリックすると、ブラウザーはサムネイルに移動します。それはリンクのターゲットでさえないので、これは本当に奇妙です.

編集:言い忘れましたが、この特定の Web ページで 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 に答える