1

私は次のマークアップを持っています：

<div style="height:100px; width:280px; float:left" >

<p style="float:left; padding:5px;" id="optionOne">

<label style="cursor:pointer; width:100px" id="optionLabelOne">Option 1</label>
<span style="color:red; font-size:10px"></span>

<input class="u-3" name="ageGroup" id="ageGroup" style="width:230px;" />
</p>

 </div>

私はそのような繰り返しのdivをいくつか持っています。選択します

その中のタグは次のようになります。

$('#optionOne,#optionTwo,#optionThree,#optionFour').on('mouseover',function(){
 $(this).on('mouseover',function(){
  //do something here});
  });

後の段階で、「input」タグを除いて「p」タグに対してクリックイベントを実行する必要があります。

以下のコードを使用すると、入力フィールドでもクリックイベントが発生します（明らか）

$(this).on('click',function(){
//do something
});

したがって、入力要素に何もせずに完全なpタグを選択するために何ができるでしょうか。

私もこれを試しました：

$(this).not('input').on('click',function(){
 //// NOT WORKING
 });

コメントしてください。

4

1 に答える 1

3

オブジェクトstopPropagationのメソッドを使用できます。event

$('p input').on('click', function(event){
     event.stopPropagation()
})

thisすべての要素を選択したので、ハンドラーをオブジェクトにバインドする必要がないことに注意してください。

$('#optionOne,#optionTwo,#optionThree,#optionFour').on('mouseover',function(){
    // 
});

pタグにクラスを追加して、クラスセレクターを使用することもできます。

$('p.options').on('mouseover',function(){
    // $(this).foo()
});
于 2012-11-17T08:51:18.937 に答える