结合悬停和单击功能（jQuery）？

Posted 2023-02-19

【中文标题】结合悬停和单击功能（jQuery）？

【英文标题】：Combine hover and click functions (jQuery)?

【发布时间】：2011-01-26 18:47:03

【问题描述】：

可以将悬停和点击功能合二为一，例如：

点击：

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

悬停：

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

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

谢谢！

【参考方案1】：

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

【参考方案2】：

我认为最好的方法是制作一个common方法并调用hover和click 事件。

【参考方案3】：

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

var hoverOrClick = function () 
    // do something common

$('#target').click(hoverOrClick).hover(hoverOrClick);

---

第二种方式：使用bindon:

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

---

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

【讨论】：

现在建议使用 jquery "on" 函数而不是使用 bind。但它的工作方式相同，只需将“bind”替换为“on”即可。

请提示我，我如何定义事件（单击或悬停）发生了什么？

因此我遇到了一些问题。我必须在悬停和单击时调用不同的函数。但是当我点击一个元素时，两个函数都会被同时调用。谁能告诉我如何解决这个问题？

@SarfrazAhmad 这是因为在用户能够点击之前，她必须悬停。也许你不需要在点击时做任何事情。

是的，但是当我点击一个元素时，如何防止在悬停时调用函数

【参考方案4】：

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

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

【参考方案5】：

你也可以使用bind:

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

【讨论】：

提醒任何尚未意识到的未来读者'从 jQuery 3.0 开始，.bind() 已被弃用。自 jQuery 1.7 起，它被用于将事件处理程序附加到文档的 .on() 方法所取代，因此不鼓励使用它。 api.jquery.com/bind

【参考方案6】：

您可以使用.bind() 或.live() 哪个合适，但无需命名函数：

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

或者如果你在很多元素上这样做（对于 IE 来说没有多大意义，除非元素发生变化）：

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

注意，这只会绑定 first 悬停参数mouseover 事件，它不会将任何东西与mouseleave 事件挂钩。

【参考方案7】：

使用 mouseover 代替悬停。

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

【参考方案8】：

  $("#target").on(
        hover: function()
           //do on mouse hover
        ,  
        click: function()
            //do on mouse click
          
    );

【讨论】：

在给出答案时，最好给出some explanation as to WHY your answer。