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);

});