Pertanyaan Gabungkan fungsi hover dan klik (jQuery)?


Dapat melayang dan fungsi klik digabungkan menjadi satu, jadi misalnya:

klik:

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

arahkan:

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

bisakah mereka digabungkan menjadi satu fungsi?

Terima kasih!


36
2018-03-12 10:30


asal


Jawaban:


Gunakan komposisi pemrograman dasar: buat metode dan berikan fungsi yang sama click dan hover sebagai panggilan balik.

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

Cara kedua: gunakan bindon:

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

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

87
2018-03-12 10:37



Menggunakan gerakan mouse bukannya melayang.

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

26
2017-12-09 09:57



Kamu dapat memakai .bind() atau .live() mana yang tepat, tetapi tidak perlu menyebutkan fungsi:

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

atau jika Anda melakukan ini pada banyak elemen (tidak terlalu masuk akal untuk IE kecuali elemen berubah):

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

Catatan, ini hanya akan mengikat pertama argumen melayang, yang mouseover event, tidak akan mengaitkan apa pun dengan mouseleave peristiwa.


9
2018-03-12 10:55



$("#target").hover(function(){
  $(this).click();
}).click(function(){
  //common function
});

6
2018-03-12 10:32



var hoverAndClick = function() {
    // Your actions here
} ;

$("#target").hover( hoverAndClick ).click( hoverAndClick ) ;

1
2018-03-12 10:37



Anda juga bisa menggunakan mengikat:

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

1
2018-03-12 10:40



Saya pikir pendekatan terbaik adalah membuat umum metode dan panggilan masuk mengambang dan klik  acara.


0
2018-03-12 10:36



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

0
2018-02-23 11:41