结合鼠标悬停和点击功能（jQuery）？

Question

可以将hover和click功能合并成一个吗，例如：

click:

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

悬停：

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

它们能合并成一个函数吗？

谢谢！

- eozzy

Answer 1

使用基本编程组合：创建一个方法，并将同一个函数作为回调传递给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
});

- Emil Ivanov

---

jQuery的“on”函数现在比使用“bind”更推荐。但它的工作方式相同，只需将“bind”替换为“on”。 - Matthew Wilcoxson

请给我提示，我该如何定义发生了什么事件（点击或悬停）？ - Eugene Shmorgun

我因为这个问题遇到了一些困难。我需要在悬停和单击两种情况下调用不同的函数。但是当我单击一个元素时，两个函数都被同时调用。有人能告诉我如何解决这个问题吗？ - Sarfraz Ahmad

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

第二种方法对我不起作用。使用mouseover而不是hover确实可以工作，但会导致多个动画。 - fseminario

Answer 2

使用mouseover而不是hover。

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

- Vergilius

Answer 3

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

- user241244

Answer 4

您可以使用.bind()或.live()，取决于哪个更合适，但不需要给函数命名：

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

如果您需要对许多元素进行此操作（除非元素发生更改，否则对于IE没有太大意义）：

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

注意，这只会绑定第一个hover参数，即mouseover事件，并不会将任何东西挂钩到mouseleave事件上。

- Nick Craver

Answer 5

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

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

- St.Woland

Answer 6

你也可以使用bind：

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

- PatrikAkerstrand

---

提醒所有尚未意识到的未来读者：自 jQuery 3.0起，.bind()已被弃用。自jQuery 1.7以来，它已被.on()方法取代，用于将事件处理程序附加到文档，因此其使用已经不再建议。请参考：http://api.jquery.com/bind/ - Hastig Zusammenstellen

Answer 7

我认为最好的方法是制作一个“通用”方法，并在“hover”和“click”事件中调用。

- Adeel

Answer 8

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

- Suhani Mendapara

---

在回答问题时，最好给出一些解释，说明为什么你的答案是正确的。参考链接。 - Stephen Rauch