防止 .hover() 多次绑定到同一个元素

Question

此问题的标题反映了最终目标，即防止.hover() 多次绑定到同一个元素。

在询问之前，我对 SO 进行了搜索，发现这个问题已经得到解答：Checking if jQuery .hover action is already binded

我也用谷歌搜索了很多关于这个问题的答案，看起来这个问题的公认答案是正确的。

因此，我想出了一小段代码，它尝试执行以下操作：

1. 循环使用类class-name的所有元素
2. 获取该元素上的所有事件
3. 检查.hover() 事件是否已经绑定在它上面
4. 如果不是，则添加它。

$(document).ready(function() {
  $('.class-name').each(function() {
    var events = $._data($(this)[0], 'events');

    if ( !(events['mouseover'] && events['mouseout']) ) {
      $(this).hover(
        function() { alert('IN'); },
        function() { alert('OUT'); }
      );
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="class-name">a</a>

上面的代码不起作用，我不知道错误在哪里。根据 JS 控制台输出，events 变量为undefined。

任何帮助表示赞赏。谢谢。

Answer 1

我找到了问题。

一开始根本没有事件绑定到元素，所以$._data($(this)[0], 'events') 是undefined。因此events 变量也是undefined。

if 子句需要遵循这个逻辑：

if ( (no events at all) OR (mousever and mouseout events don't exist) )

下面固定代码sn-p：

$(document).ready(function() {
  $('.class-name').each(function() {
    var events = $._data($(this)[0], 'events');

    if ( typeof(events) === 'undefined' || !(events['mouseover'] && events['mouseout']) ) {
      $(this).hover(
        function() { alert('IN'); },
        function() { alert('OUT'); }
      );
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="class-name">a</a>

Answer 2

在if 语句中检查事件之前，您忘记将事件绑定到<a> 元素

$(document).ready(function() 
{
  $('.class-name').each(function() 
  {
    var events = $(this);
    //set the events first
    events.on("mouseover", mouseover);
    events.on("mouseout", mouseout);
    
    if ( (events['mouseover'] && events['mouseout']) ) {
      console.log("both events bound to <a> tag");
    }
    
    //output all event handlers in console
    console.log('Event handlers :', $._data(events[0], "events"));
  });
});

var mouseover = function(){console.log('IN');};
var mouseout = function(){console.log('OUT');};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="class-name">a</a>