Question

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

JS：

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

    });

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

有谁知道为什么？

Answer 1

只是想知道点击和悬停如何一起工作，因为当鼠标悬停时，事件被触发。

这是使用fiddle

的示例

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

});

Answer 2

我认为你必须使用＆＃39; mouseover＆＃39;而不是＆＃39;悬停＆＃39;，这些事件未在事件中列出：http://api.jquery.com/Types/#Event。但是有一个单独的悬停功能：http://api.jquery.com/hover/。

Answer 3

我不知道为什么当你将悬停放在jQuery中时它不起作用，但如果你使用jQuery hover，它就可以工作。单击下面的按钮运行代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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/（查找：＆＃34;示例：使用普通对象同时附加多个事件处理程序。＆＃34;）

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

4 个答案: