jQuery hover只触发一次？

Question

如何使用jquery实现鼠标悬停函数只执行一次并停止？

.one()方法无效。

$(".button-color-2").hover(
  function (){
   dosmth(); 
});

谢谢你

- Stewie Griffin

Answer 1

Hover绑定了鼠标进入和鼠标离开事件的处理程序，它本身不是一个事件。因此，为了达到与Hover相同的效果，您需要进行两次绑定来触发一次。

$(".button-color-2").one("mouseenter mouseleave", function(e){
dosmth();
});

如果你想在鼠标进入和离开时执行不同的操作，则绑定两个不同的处理程序。

$(".button-color-2").one("mouseenter", function(e){
dosmth1();
}).one("mouseleave", function(e){
dosmth2();
});

另一种选择是使用 Hover，然后在完成后解除绑定。

$('.button-color-2').hover(function() {
dosmth();
$(this).unbind('mouseenter mouseleave')
});

- Piyush Mattoo

---

(".button-color-2").one("mouseenter", function(e){ 运行正常，(".button-color-2").one('hover', function(){ 没有运行！不知道为什么... - Stewie Griffin

Answer 2

如果这个不起作用：

$(".button-color-2").one('hover', function() {
    dosmth();
});

那么尝试这个，它将执行一次悬停，然后解除悬停事件：

$('.button-color-2').bind('hover', function(event) {
  dosmth();
  $(this).unbind(event);
});

- amurra

---

(".button-color-2").one("mouseenter", function(e){ 运行正常，(".button-color-2").one('hover', function(){ 没有运行！不知道为什么... - Stewie Griffin

Answer 3

这是一个旧的线程，但是我成功地完成了这个任务。我创建了一个计数器，在鼠标进入时递增，并使用if语句来查看计数器是否大于1。如果计数器大于1，只需再创建一个else语句，完全退出它（这是为了防止它不断执行效果）。您还需要一个mouseleave方法将计数器重置为0。以下是我使用的代码：

    $("#mydiv").mouseenter(function(){
        if (counter < 1){
            $(this).effect("pulsate", { times:1 }, 300);
            counter = counter + 1;
            return;
        }
        else{
            return;
        }
    });
    $("#mydiv").mouseleave(function(){
        counter = 0;
        return;
    });

如果您想看它运行，这是页面：http://webpages.marshall.edu/~glasser1/jquery.html

悬停在白色框上，它会脉冲一次。

编辑：我忘记添加您需要在函数外初始化变量计数器，以使其成为全局变量并将其设置为零。

- Edward Glasser

Answer 4

如果你只是将那段代码包装成了 .one()，那么你做错了。

通过你的上层函数，你正在分配 hover 事件，而不是执行它。因此，你必须像这样使用 $.one()：

$('.button-color-2').one('hover', function()
      dosth();
);

- usoban

---

(".button-color-2").one("mouseenter", function(e){ 运行正常，(".button-color-2").one('hover', function(){ 没有运行！不知道为什么... - Stewie Griffin