4

divにクリックリスナーがあり、div内に通常のタグが付いたリンクがありますが、リンクをクリックするたびにイベントも実行されます。div内のリンクをクリックした場合に、クリックリスナー内のものが実行されないようにするにはどうすればよいですか？

HTML：

<div class="container item-container" data="skarp-version-av-os-x-10.8.3-slappt">
        <div class="item">
            <div class="number">
                <p class="number-data">1</p>
            </div>
            <div class="upvotes btn tooltip-points" points="4" id="90" data-toggle="tooltip" title="" data-original-title="Visar poäng satta de senaste 24 h">
                4 poäng
            </div>
            <div class="item-content">
                <a href="http://feeds.idg.se/~r/idg/ETkj/~3/XSuYKgEiumE/skarp-version-av-os-x-1083-slappt" target="_blank" class="item-link fill-div">Skarp version av OS X 10.8.3 släppt</a>
                <span class="item-source">(feeds.idg.se)</span>
                <p class="item-author">Upplagd av Anonym - <em>2013-03-17 21:07:08</em></p>
            </div>
            <div class="comment">
                <i class="icon-comment"></i> <a href="http://www.tldr.nu/item/view/skarp-version-av-os-x-10.8.3-slappt#disqus_thread">0 Comments and 0 Reactions</a>
            </div>
        </div>
    </div>

Javascript：

$('.item-container').click(function(event) {
    var url = $(this).attr('data') ? $(this).attr('data') : '';
    if(url != '')
        window.location = getBaseURL() + 'item/view/' + url;
});
4

5 に答える 5

2

クリックイベントがdivまでバブリングするのを防ぐイベントハンドラーをリンクに追加するか、イベントターゲットがリンクであるときにクリックイベントを無視するようにdivのハンドラー内にifステートメントを追加することができます。前者の解決策が進むべき道だと思います。

これにより、クリックイベントがdivまで伝播するのを停止するイベントハンドラーがリンクに設定されます。

$('.item-container a').click(function(event) {
   event.stopPropagation();
});

jsfiddleデモ

于 2013-03-17T22:17:24.520 に答える
1

次のように、特定の防止方法を内部要素にバインドする必要があります-

$("a").click(function(e){
    e.stopPropagation();
});

または、クリックした要素のタイプをスニッフィングする必要があります-

$(".wrap").click(function(e){
    if ($(e.target).hasClass("wrap")){
       alert("click");
    }
});

2番目の方法が通常は望ましいです。なぜなら、この質問が発生するためには、内部要素に、かなり正常に機能したい独自のイベントがあるためです。

ただし、リンクをクリックしたときに親のdiv効果がトリガーされないようにしたい場合は、最初の方が適しています。

フィドル-http://jsfiddle.net/WXzjP/

于 2013-03-17T22:20:04.783 に答える
0 
$('.item-container').click(function(event) {
    if(!$(event.target).is('a')) {
        var url = $(this).attr('data') ? $(this).attr('data') : '';
        if(url != '')
            window.location = getBaseURL() + 'item/view/' + url;
    }
});

イベントを開始したイベントターゲットがアンカー要素であるかどうかを確認し、そうでない場合は関数を実行します。

于 2013-03-17T22:19:44.810 に答える
0

イベントバブリングをよく理解してください。最終的にイベント委任を理解するには、基本を理解する必要があります。

2つの方法のいずれかで問題を解決できます。<a>クリックイベントをあなたの内にバインドして<div>呼び出すevent.stopPropagation();か、<div>のイベントハンドラーに要素event.targetであるかどうかをチェックさせます。<a>

if (event.target.nodeName.toLowerCase() === 'a') {
  // <a> was clicked
}
于 2013-03-17T22:21:38.420 に答える
0

それは「泡立つ」からです。このように考えてください。

リンクをクリックすると、指定したとおりに実行するアクションがあります。URLに移動します。次に、ツリーを「バブルアップ」し、divのクリックハンドラーもあるので、それを実行しようとします。それも。

クリックハンドラーもある場合は、$('body')それも呼び出されます。

あなたはで泡立つのをやめなければなりませんevent.stopPropagation();

例えば

$('#your-anchor-tag').click(function(e) {
 e.stopPropagation();
}

そうすれば、バブリングアッププロセスを停止できます。

于 2013-03-17T22:23:30.077 に答える