具有不同功能和目标选择器的一个元素上的多个jQuery事件 [英] Multiple jQuery events on one element with different functions and target selectors

问题描述

  $（'selector'）有没有办法结合这两种方法来处理jQuery中的事件附件？ 。$（$ {
 mouseenter：function（）{}，
 mouseleave：function（）{}，
 mousedown：function（）{} } 
}）; 
  

我更喜欢以前的方法，但需要像以下这样的方法来处理live-events（问题是，如果处理程序之间有一个注释，这将不起作用）：

  $（document）.on（'mouseenter' ，'selector1'，function（）{}）
 .on（'mouseleave'，'selector2'，function（）{}）
 .on（'mousedown'，'selector3'，function {}）
 .on（'mouseup'，'selector4'，function（）{}）; 
  

但是，有没有解决方法这样做？：

  $（document）.on（{
 mouseenter：'selector1'：function（）{}，
 mouseleave：'selector2' function（）{}，
 mousedown：'selector3'：function（）{}，
 mouseup：'selector4'：function（）{} 
}）; 
  

更新

我已经结束了这个简单的在 -wrapper函数： https://gist.github.com/4191657

使用情况非常简单：

  $（document）.act（
 ['mouseenter'，'selector1'，function（）{}]，
 ['mouseleave'，'selector2' ，
 ['mousedown'，'selector3'，function（）{}]，
 ['mouseup'，'selector4'，function（）{}] 
）; 
  

对此有任何建议或改进？

解决方案

查看 .on的jQuery文档（）方法。当您使用第一个示例中使用的事件映射版本时，可以将选择器作为第二个参数传递：

  $（文件）.on（{
 mouseenter：function（）{}，
 mouseleave：function（）{}，
 mousedown：function（）{}，
 mouseup：function ）{} 
}，selector）; 
  

这假设您要为所有这些事件使用相同的选择器。如果可能有所不同，您最好的选择可能是将呼叫链接到 .on（）：

 $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ 
 // ... etc 
  

Is there a way to combine these two methods of handling the event attachment in jQuery?

$('selector').on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown:  function() {},
    mouseup:    function() {}
});

I prefer the previous method but need something like the following to work with "live"-events (the problem is that this will not work if there's a comment between the handlers):

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           .on('mousedown',  'selector3', function(){})
           .on('mouseup',    'selector4', function(){});

However, is there a workaround to do it like this?:

$(document).on({
    mouseenter: 'selector1': function() {},
    mouseleave: 'selector2': function() {},
    mousedown:  'selector3': function() {},
    mouseup:    'selector4': function() {}
});

Update

I've ended up with this simple on-wrapper function: https://gist.github.com/4191657

The usage is quite simple:

$(document).act(
    ['mouseenter', 'selector1', function() {}],
    ['mouseleave', 'selector2', function() {}],
    ['mousedown', 'selector3', function() {}],
    ['mouseup', 'selector4', function() {}]
);

Any suggestions or improvements to this?

解决方案

Look at the jQuery docs for the .on() method. You can pass a selector as the second argument when you use the event map version that you use in your first example:

$(document).on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown: function() {},
    mouseup: function() {}
}, "selector");

This assumes that you want to use the same selector for all of those events. If it can differ, your best option may be to chain the calls to .on():

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           // ...etc

这篇关于具有不同功能和目标选择器的一个元素上的多个jQuery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！