jquery组合点击和悬停功能仅适用于点击，不适用于悬停答案

【问题标题】：jquery combined click and hover function only works for click, not working for hoverjquery组合点击和悬停功能仅适用于点击，不适用于悬停
【发布时间】：2014-10-02 03:08:53
【问题描述】：

我的问题相当简单但令人困惑。我使用 .on() 组合了“单击”和“悬停”，但该功能仅在单击时触发，而不是悬停。

JS：

    var hoverElem = null;
    $("table tbody tr td").on('click hover', function(e){
        alert("TDDDDD!!!!");

    });

html部分是一个简单的html表格。

有人知道为什么吗？

【问题讨论】：

标签： jquery hover click jquery-hover

【解决方案1】：

只是想知道单击和悬停如何协同工作，因为当您将鼠标悬停时会触发事件本身。

这是使用fiddle的示例

var hoverElem = null;
$("div").on('click mouseover', function(e){
    alert("TDDDDD!!!!");

});

【讨论】：

很好地了解事件名称。我将我的答案固定为参考mouseover。你的回答更简洁一点。

【解决方案2】：

我认为您必须使用“鼠标悬停”而不是“悬停”，这未在事件中列出：http://api.jquery.com/Types/#Event。不过有一个单独的悬停功能：http://api.jquery.com/hover/。

【讨论】：

【解决方案3】：

我不知道为什么当您将悬停在 jQuery 上时它不起作用，但是如果您使用 jQuery hover 代替，它会起作用。点击下方按钮运行代码。

$(function() {
  function my_function(e) {
    alert("TDDDDD!!!!");
  };

  $("table tbody tr td").on('click', function(e) {
      my_function(e);
    })
    .hover(function(e) {
      my_function(e);
    });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>test</td>
  </tr>
</table>

【讨论】：

事件名称是@SameeraThilakasiri 指出的mouseover

【解决方案4】：

同一on() 中的多个事件的语法略有不同。

$( "table tbody tr td" ).on({
  click: function() {
    alert("TDDDD!!");
  }, 
  hover: function() {
    alert("TDDDD!!");
  }
});

这里有重复的代码，所以只需要创建一个函数：

alertFunc = function() {
  alert("TDDDD!!!");
};
$( "table tbody tr td" ).on({
  click: alertFunc, 
  mouseover: alertFunc
});

查看处理多个事件的示例：http://api.jquery.com/on/（查找：“示例：使用普通对象同时附加多个事件处理程序。”）

【讨论】：