结合悬停和点击功能(jQuery)?

时间:2010-03-12 10:30:32

标签: javascript jquery function click hover

可以将悬停和点击功能合并为一个,例如:

点击:

$('#target').click(function() {
  // common operation
});

悬停:

$('#target').hover(function () {
    // common operation
});

它们可以组合成一个功能吗?

谢谢!

7 个答案:

答案 0 :(得分:89)

使用基本编程组合:创建一个方法并将相同的函数传递给clickhover作为回调。

var hoverOrClick = function () {
    // do something common
}
$('#target').click(hoverOrClick).hover(hoverOrClick);

第二种方式:使用 bind on

$('#target').on('click mouseover', function () {
    // Do something for both
});

jQuery('#target').bind('click mouseover', function () {
    // Do something for both
});

答案 1 :(得分:28)

使用鼠标悬停而不是悬停。

$('#target').on('click mouseover', function () {
    // Do something for both
});

答案 2 :(得分:9)

您可以使用.bind().live(),但不需要命名该功能:

$('#target').bind('click hover', function () {
 // common operation
});

或者如果你在很多元素上做这个(除非元素改变,否则对IE没有多大意义):

$('#target').live('click hover', function () {
 // common operation
});

注意,这只会绑定第一个悬停参数mouseover事件,它不会将任何内容挂钩到mouseleave事件。

答案 3 :(得分:6)

$("#target").hover(function(){
  $(this).click();
}).click(function(){
  //common function
});

答案 4 :(得分:1)

var hoverAndClick = function() {
    // Your actions here
} ;

$("#target").hover( hoverAndClick ).click( hoverAndClick ) ;

答案 5 :(得分:1)

您也可以使用bind

$('#myelement').bind('click hover', function yourCommonHandler (e) {
   // Your handler here
});

答案 6 :(得分:0)

我认为最佳方法是制作常用方法并调用悬停点击 事件。< / p>