在jquery中使用带有选择器的事件名称有什么用?

时间:2014-08-21 12:40:46

标签: javascript jquery html mouseevent

我有这个HTML

<div class="wrapper">
  <div class="holder">
    <span class="pressy">press here..!!</span>
    <div class="inner">
        <span class="pressy">press here..!!</span>
    </div>
  </div>
</div>

和js

$('.wrapper').on('mousedown.inner','.pressy',function(e){
  alert($(this).attr('class'))
})

实际上,我对“压力”和“压力”都很警觉。我怎么才能得到内心的压力?

还有一件事是

的用途
  

&#39; mousedown.inner&#39;

(不在此。我询问一般用途)我该如何正确使用它?

小提琴:http://jsfiddle.net/4ayqqfnm/

感谢..

6 个答案:

答案 0 :(得分:1)

它被称为event namespacing,它被使用以便我们可以单独定位这些事件。

假设您要向按钮添加多个单击处理程序,然后只想删除其中一个处理程序,您是如何做到的?执行$('button').off('click')将删除添加到按钮的所有点击处理程序,这不是我们想要的。

所以解决方案是使用像

这样的命名空间
$('button').on('click.myevent', function(){...})

然后我们做

$('button').off('click.myevent')

它只会删除添加了命名空间myevent

的点击处理程序

答案 1 :(得分:0)

这应该做你需要的:

$('.wrapper').on('mousedown', '.inner .pressy', function (e) {
    alert($(this).attr('class'))
})

on函数中,它忽略了.以及之后的任何内容,因此我已将.inner选择器移到下一个参数,以仅定位目标。

答案 2 :(得分:0)

以上答案有效,也可以做

 $('.inner').on('mousedown','.pressy',function(e){
    alert($(this).attr('class'))
 })

其中作为垃圾片段的目标是内部的压力类.inner

http://jsfiddle.net/9krgu4ge/

答案 3 :(得分:0)

您只需要像这样修改JS:

$('.wrapper').on('mousedown.inner','.inner .pressy',function(e){
  alert($(this).attr('class'))
})

保持mousedown.inner是可选的(正如@Arun所说,它适用于事件命名空间) - 这里没有必要,但它不会伤害任何东西。 第二部分.inner .press y使其成为更具体的选择器并让它忽略您的第一个.pressy元素

DEMO

答案 4 :(得分:0)

您必须做的唯一更改是在.pressy内指定仅关注.inner的委托选择器,而不是每.inner

$('.wrapper').on('mousedown.inner','.inner .pressy', function(e){
    alert($(this).attr('class'))
});

.on('mousedown.inner', ...唯一能做的就是命名事件处理程序,以便以后可以通过命名空间删除它们,而不必删除mousedown上的所有其他.wrapper处理程序。

FIDDLE

答案 5 :(得分:0)

$('.wrapper').on('mousedown','.inner > .pressy',function(e){
    alert($(this).attr('class'))
    })