Question

这里的一般javascript问题，如果知道如何（如果可能的话）在jquery中做也很好。

将鼠标悬停在某个项目上时，是否可以触发点击事件？

我知道会有人问为什么，但请你幽默我。

非常感谢， ç

Answer 1

查看trigger功能：

$(someElement).trigger('click');

Answer 2

很简单：

$(selector).mouseenter(function() { $(this).click() });

Answer 3

只需使用click（）

$(selector).click();

或者，只需将您的click()代码移到一个公共函数中，然后从hover()调用该代码。

Answer 4

$('myselector').hover(function(){  
    $(this).trigger('click');  
});

编辑：方式晚于帖子，但只是为了说明如何添加处理程序并触发它。

$('myselector').on('click',function(){  
    // handle click event, put money in my bank account  
}).on('mouseenter',function(){  
    $(this).trigger('click');  // only on enter here
    // handle hover mouse enter of hover event, put money in my bank account  
}).on('mouseleave',function(){  
    // handle mouse leave event of hover, put money in my bank account  
}).trigger('click');

只需要一次吗？

$('myselector').on('click',function(){  
    // handle click event, put money in my bank account  
}).one('mouseenter',function(){  
    $(this).trigger('click');  // only on enter here once
    // handle hover mouse enter of hover event, put money in my bank account  
}).on('mouseenter',function(){  
    // handle hover mouse enter of hover event, put money in my bank account  
}).on('mouseleave',function(){  
    // handle mouse leave event of hover, put money in my bank account  
});

Answer 5

jQuery可以触发'click'除标记a

之外的所有对象

让我们在控制台上试试这段代码并查看此页面上发生的事情

$('a').bind('mouseover', function(){ 
    $(this).trigger('click'); 
    console.log('hover'); // let me know when it hovering <a>
});

Answer 6

$('#selector').bind('mouseover',function(){

/*DO WHAT YOU WANT HERE*/


});

应该做的伎俩

Answer 7

可以在悬停时触发点击事件。

尝试以下示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover + (mouseup/mousedown, click) demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="up">Press mouse and release here.</p>
<p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p>
<p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p>
<p class="hover3">Press mouse and release here. HOVER.CLICK</p>

<script>
$( "p.up" )
  .mouseup(function() {
    $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
  })
  .mousedown(function() {
    $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
  });
$( "p.hover1" )
  .hover(
    function() {
      $( this ).append( "<span style='color:#f00;'>Hover IN.</span>" );
    },
    function() {
      $( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" );
    })
  .mouseup(function() {
    $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
  })
  .mousedown(function() {
    $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
  });
$( "p.hover2" )
  .hover(
    function() {
      $( this ).append( "<span style='color:#f00;'>Hover IN.</span>" );
    },
    function() {
      $( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" );
    });
$( "p.hover2" )
  .mouseup(function() {
    $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
  })
  .mousedown(function() {
    $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
  });
$( "p.hover3" )
  .hover(
    function() {
      $( this ).append( "<span style='color:#f00;'>Hover IN.</span>" );
    },
    function() {
      $( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" );
    });
$( "p.hover3" )
  .click(function() {
    $( this ).append( "<span style='color:#00f;'>CLICK.</span>" );
  });
</script>

</body>
</html>

Answer 8

您可能还希望在悬停时添加延迟，以便它不会立即触发。如果要在缩略图列表中使用延迟，则延迟将非常有用。

var hoverTimer;
var hoverDelay = 200;

$('.classSelector').hover(function() {
    var $target = $(this);
    // on mouse in, start a timeout
    hoverTimer = setTimeout(function() {        
        // do your stuff here
        $target.trigger('click');         
    }, hoverDelay);
}, function() {
    // on mouse out, cancel the timer
    clearTimeout(hoverTimer);

});

是否可以在悬停时触发点击事件？

8 个答案: