1

ネストされた要素が3つある場合:

<div class='container' fb-href='someUrl'>
   <span class='someText'>
         Lorem ipsum dolor sit amet, <a href='url'>consectetur</a> adipiscing.
   </span>
</div>

外側のdivには、クリックイベントがあります。

$('.container').click(function(){
   window.open($(this).attr('fb-href'));
});

.someText内のURLをクリックした場合に、イベントが発生しないようにするにはどうすればよいですか?(もちろん、ユーザーがコンテナリンクではなくaリンクに移動できるようにしたいためです。)

4

2 に答える 2

1

コールバックにeventパラメーターを受け入れさせ、イベントを開始した要素の種類を確認します。

$('.container').click(function(event){
   if(event.target.tagName != 'A') {
     window.open($(this).attr('fb-href'));
   }
});
于 2013-03-02T23:09:12.043 に答える
1

.someText内のURLをクリックした場合に、イベントが発生しないようにするにはどうすればよいですか?(もちろん、ユーザーがコンテナリンクではなくaリンクに移動できるようにしたいためです。)

ふたつのやり方:

  1. clickイベントをフックして、イベントオブジェクト.someTextで使用します。stopPropagation

    $(".someText").click(function(e) {
        e.stopPropagation();
    });
    
  2. clickハンドラーで、クリックが。にある場合は、クリックを確認.containerして無視します。e.target.someText

    $(".container").click(function(e) {
        if ($(e.target).closest('.someText')[0]) {
            // Don't do anything
        }
    });
    

    e.target実際にクリックされた要素です。closestセレクターに一致する最初の要素を、指定した要素を調べてから、その親要素などを調べて見つけます。

于 2013-03-02T23:09:13.370 に答える