jQueryを使用して2つの部門間をクリックして検索

Question

oneとtwoの2つの部門が、oneの部門twoにあります。今、私がoneをクリックして、twoの外をクリックして、twoをクリックするとTWOに警告すると、1つ目の警告が表示されます。

これは私が試したものです。

HTML：

<div id="one"> 
    ONE ONE<br>ONE ONE<br> 
    <div id="two"> 
    TWO TWO<br>TWO TWO<br> 
    </div> 
    ONE ONE<br>ONE ONE<br> 
</div> 

JS：あなたの助けを事前に

$("div").click(function(event){ 
    var target = $(event.target); 
    if(target.is("two")){ 
     alert("two"); 
    }else{ 
     alert("one"); 
    } 
}); 

感謝。

Answer 1

あなたはdivタグ、イベントハンドラの両方を入れ子になったが、唯一つのイベントをしたいしたら、あなたが最初に考えたのevent.preventDefault()を使用することです

event.stopPropagation(); 

を使用する必要がありますしかし：

preventDefault（）メソッドは、DOMを介したイベントの伝播を防止しません。これを処理するには、stopPropagation（）メソッドを使用します。

ref

Secondingly、.is関数は、引数としてセレクタを取るので、クラスセレクタ（.class）またはID（#id）であろう。

$("div").click(function(event){ 
    var target = $(event.target); 
    if(target.is("#two")){ 
     // don't bubble up to get two events 
     event.stopPropagation(); 
     alert("two"); 
    }else{ 
     alert("one"); 
    } 
}); 

の作業フィドル：あなたの更新されたコード与える

https://jsfiddle.net/phubzq68/

Answer 2

$(document).ready(function(){ 
    $("div").click(function(){ 
     var id = $(this).attr('id'); 
     switch (id) { 
      case 'one': 
       alert('one'); 
       break; 
      case 'two': 
       alert('two'); 
       break; 
    }); 
}); 

注：テストされていない

Answer 3

$("#one").click(function(event) { 
 
    alert("one"); 
 
}); 
 
$("#two").click(function(event) { 
 
    event.stopPropagation(); 
 
    alert("two"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"> 
 
    ONE ONE 
 
    <br>ONE ONE 
 
    <br> 
 
    <div id="two"> 
 
    TWO TWO 
 
    <br>TWO TWO 
 
    <br> 
 
    </div> 
 
    ONE ONE 
 
    <br>ONE ONE 
 
    <br> 
 
</div>

1. は、次にを使用
2. の両方に別々のクリックを持っていますは、バブリングを避けるために