Question

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

在问我搜索SO之前，我发现这个问题已经回答：Checking if jQuery .hover action is already binded

此外，我已经搜索了很多关于它的内容，看起来这个问题的接受答案是正确的。

有了这个，我想出了一小段代码，试图做到以下几点：

使用类class-name
获取该元素的所有事件
检查.hover()事件是否已绑定
如果不是，请添加。

$(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) )

固定代码段下方：

＆＃13;

$(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'); }
      );
    }
  });
});

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

$(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');};

＆＃13;

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

＆＃13;

阻止.hover（）多次绑定到同一个元素

2 个答案: