Is it possible to trigger a click event on hover?
General javascript question here, which would also 开发者_如何学运维be good to know how(if possible) to do in jquery.
Can you trigger a click event when hovering over an item?
I know there will be people asking why, but please just humour me.
Many thanks, C
Take a look at the trigger function:
$(someElement).trigger('click');
Just use click()
$(selector).click();
Or, alternatively just move your click() code out into a common function and call that from hover().
Quite simply:
$(selector).mouseenter(function() { $(this).click() });
$('myselector').hover(function(){
$(this).trigger('click');
});
EDIT: way later than the post but just to illustrate how to both add the handler AND trigger it.
$('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');
Just need it one time?
$('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
});
jQuery can trigger 'click' all object except tag a
let's try this code on console and see what happen on this page
$('a').bind('mouseover', function(){
$(this).trigger('click');
console.log('hover'); // let me know when it hovering <a>
});
$('#selector').bind('mouseover',function(){
/*DO WHAT YOU WANT HERE*/
});
that should do the trick
It is possible to trigger a click event on hover.
Try the following example:
<!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>
You might want to also add a delay on hover so that it won't immediately trigger. Delay will be useful if you are going to use it in a list of thumbnails.
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);
});
加载中,请稍侯......
精彩评论