Question

我有这个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/

感谢..

Answer 1

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

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

所以解决方案是使用像

这样的命名空间

$('button').on('click.myevent', function(){...})

然后我们做

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

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

的点击处理程序

Answer 2

这应该做你需要的：

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

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

Answer 3

以上答案有效，也可以做

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

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

http://jsfiddle.net/9krgu4ge/

Answer 4

您只需要像这样修改JS：

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

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

DEMO

Answer 5

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

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

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

FIDDLE

Answer 6

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

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

6 个答案: