3

クリックイベントがあるDIVブロック内にリンクを実装しようとしています。

ユーザーがリンクをクリックした場合、外側のDIVクリックイベントを実行しないようにしたいと思います。

私のリンクは次のようになります：

<a href="javascript: openVideo('videoID', this, event); " >Watch the video</a>

そしてjavascriptは次のようになります：

 function openVideo(video, object, event) {

    $(object).html($(object).html()+"<iframe width='360' height='315' src='http://www.youtube.com/embed/"+video+"' frameborder='0' allowfullscreen></iframe>");

    event.stopPropagation();
 }

残念ながら、リンクをクリックすると、外部のDIVコードが実行されます。そして、stopPropogationメソッドに関連するエラーを示しています。

Uncaught TypeError: Cannot call method 'stopPropagation' of undefined

何が問題になる可能性がありますか？

4

4 に答える 4

6

呼び出されるイベントがないためです。代わりに、次のように呼び出してみてください。

<a href="#" onclick="openVideo('videoID', this, event); " >Watch the video</a>

</p>

于 2012-06-25T18:58:06.440 に答える
1

jQueryを使っているようです。そのように使用することを意図したものではありません。渡すイベント オブジェクトは、ブラウザのネイティブ イベント オブジェクトです。jQuery のイベント オブジェクトは stopPropagation 関数を提供します。

jQuery を適切に使用するには、イベントをインラインではなく jQuery にバインドさせる必要があります。

<a href="#" class="openVideo" data-video="videoID" >Watch the video</a>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".openVideo").click(function(ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var videoID = $(this).data('video');
            $(this).append("<iframe width='360' height='315' src='http://www.youtube.com/embed/"+videoID+"' frameborder='0' allowfullscreen></iframe>");
        });
    });
</script>

編集: jQuery 1.4.3 以降ではデリゲートを使用できるため、イベントをアンカーに直接アタッチする必要はありませんが、その先祖の 1 つにアタッチする必要はありません。(jQuery 1.7 は.onメソッドを使用して同じことを実現します)。 jQuery 1.7 を使用した例を次に示します: http://jsfiddle.net/Tu9Hm/

<a href="#" class="openVideo" data-video="videoID" >Watch the video</a>

<script type='text/javascript'>
    $(document).ready(function() {
        $(document).on('click', '.openVideo', function(ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var videoID = $(this).data('video');
            $(this).append("<iframe width='360' height='315' src='http://www.youtube.com/embed/"+videoID+"' frameborder='0' allowfullscreen></iframe>");
        });
    });
</script>

デリゲートを使用するとパフォーマンスがわずかに低下するため、DOM 内の可能な限り低い要素にイベントを配置するようにしてください。また、デリゲートをドキュメントに配置すると、Propagation はすでにトップに達しているため、実際には停止できませんが、あなたは本当にもっと心配していると思いますpreventDefault()

于 2012-06-25T19:01:05.950 に答える
0

編集：私は嘘をついた。jQuery専用stopPropagationではありません。j08691の答えで行ってください。

私の知る限りstopPropagation、jQuery関数です。つまり、jQueryイベントハンドラーによって作成されたイベントオブジェクトを呼び出す必要があります。

これが1つの方法です：

<a id="open-video-link" href="javascript: void(0);">Watch the video</a>

<script type="text/javascript">
  $("#open-video-link").click(function(event) {
    openVideo("videoID", this, event);
  });
</script>

もちろん、私がぼんやりとした知識を失い、それをまったく調べなかったので、私が今書いたものを一粒の塩で取ってください。

于 2012-06-25T19:02:10.580 に答える
-2

試す

 $("a").on("click", function (e) {
            e.stopPropagation ();
        });
于 2012-06-25T19:01:43.937 に答える