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});
  });

现在在稍后的某个阶段，我需要在“p”标签上执行一个点击事件，不包括其中的“input”标签。

当我使用下面的代码时，点击事件也会在输入字段上触发（很明显）

$(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 回答