web-dev-qa-db-fra.com

Combiner les fonctions de survol et de clic (jQuery)?

Les fonctions de survol et de clic peuvent être combinées en une seule, par exemple:

cliquez sur:

$('#target').click(function() {
  // common operation
});

flotter:

$('#target').hover(function () {
    // common operation
});

peuvent-ils être combinés en une seule fonction?

Merci!

javascriptjqueryfunctionclickhover
38
3zzy

Utilisez la composition de programmation de base: créez une méthode et passez la même fonction à click et hover comme rappel.

var hoverOrClick = function () {
    // do something common
}
$('#target').click(hoverOrClick).hover(hoverOrClick);

Deuxième voie: utiliser bindon:

$('#target').on('click mouseover', function () {
    // Do something for both
});

jQuery('#target').bind('click mouseover', function () {
    // Do something for both
});
91
Emil Ivanov

Utilisez mouseover au lieu de survoler.

$('#target').on('click mouseover', function () {
    // Do something for both
});
28
Vergilius

Vous pouvez utiliser .bind() ou .live() selon le cas, mais pas besoin de nommer la fonction:

$('#target').bind('click hover', function () {
 // common operation
});

ou si vous faisiez cela sur beaucoup d'éléments (pas beaucoup de sens pour un IE sauf si l'élément change):

$('#target').live('click hover', function () {
 // common operation
});

Notez que cela ne liera que l'argument de vol stationnaire first, l'événement mouseover, il n'accrochera rien à l'événement mouseleave.

9
Nick Craver
$("#target").hover(function(){
  $(this).click();
}).click(function(){
  //common function
});
7
D_N
var hoverAndClick = function() {
    // Your actions here
} ;

$("#target").hover( hoverAndClick ).click( hoverAndClick ) ;
1
St.Woland

Vous pouvez également utiliser bind :

$('#myelement').bind('click hover', function yourCommonHandler (e) {
   // Your handler here
});
1
PatrikAkerstrand

je pense que la meilleure approche est de créer une méthode commune et d'appeler survoler et cliquer événements .

0
Adeel
  $("#target").on({
        hover: function(){
           //do on mouse hover
        },  
        click: function(){
            //do on mouse click
        }  
    });
0
Suhani Mendapara