是否可以在悬停时触发点击事件？
[英]Is it possible to trigger a click event on hover?
问题描述
一般的javascript问题，这也是很好的知道如何（如果可能）在jquery中做。
将鼠标悬停在某个项目上时，是否可以触发点击事件？
我知道会有人问为什么，但请你幽默我。
非常感谢，C
8 个解决方案
解决方案1
12 已采纳 2010-03-17 11:10:06
看看触发功能：
$(someElement).trigger('click');
解决方案2
5 2010-03-17 11:18:40
很简单：
$(selector).mouseenter(function() { $(this).click() });
解决方案3
4 2010-03-17 11:14:40
解决方案4
2 2010-03-17 12:59:58
$('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
});
解决方案5
1 2010-03-17 12:23:55
jQuery可以触发'click'除标记a之外的所有对象
让我们在控制台上尝试这个代码，看看这个页面上发生了什么
$('a').bind('mouseover', function(){
$(this).trigger('click');
console.log('hover'); // let me know when it hovering <a>
});
解决方案6
0 2010-03-17 12:15:12
$('#selector').bind('mouseover',function(){
/*DO WHAT YOU WANT HERE*/
});
这应该够了吧
解决方案7
0 2014-11-02 02:54:38
可以在悬停时触发单击事件。
请尝试以下示例：
<!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>
解决方案8
0 2015-01-09 17:56:40
您可能还希望在悬停时添加延迟，以便它不会立即触发。 如果要在缩略图列表中使用延迟，则延迟将非常有用。
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);
});
是否可以使用按钮单击事件来触发 React 中的表单提交？
[英]Is it possible to use button click event to trigger form submit in React?
是否可以在列表中的背景图像上触发 jQuery 点击事件？
[英]Is it possible to trigger a jQuery click event on a background-image in a list?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.