使用JQuery将鼠标悬停在元素上x秒时，如何触发单击？

Question

我知道已经问过这个问题，并已经回答here，但设置一个计时器与hover（）函数一起使用。

由于我的元素是动态创建的，它需要两个不同的函数：一个在mouseenter上，另一个在mouseleave上。

任何人都对这种特殊需求有所了解吗？

PS：我知道有一个名为hoverIntent的插件，但我不想使用任何插件！

Answer 1

尝试

$(document).on({
    mouseenter: function () {
        var $this = $(this);
        var timer = setTimeout(function () {
            $this.click();
        }, 2000)
        $this.data('clicktimer', timer)
    },
    mouseleave: function () {
        clearTimeout($(this).data('clicktimer'))
    }
}, '#test');

演示：Fiddle

Answer 2

这样的东西？

$('.myelement').on('mouseenter', function(e) {
  var element = $(this),
      ctx = null,
      timeout = 2000;

  ctx = setTimeout(function() {
     element.trigger('click');
     clearTimeout(ctx);
  }, timeout);
});