web-dev-qa-db-ja.com

ホバー機能とクリック機能を組み合わせます（jQuery）？

ホバー機能とクリック機能を1つにまとめることができます。たとえば、次のとおりです。

クリック：

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

ホバー：

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

それらを1つの機能に結合できますか？

ありがとう！

javascriptjqueryfunctionclickhover
38
3zzy

基本的なプログラミング構成を使用します。メソッドを作成し、同じ関数をコールバックとしてclickとhoverに渡します。

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

2番目の方法：使用 bindon：

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

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

代わりにmouseoverを使用します。

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

.bind()または.live()のいずれか適切な方を使用できますが、関数に名前を付ける必要はありません。

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

または、多くの要素でこれを行っていた場合（IE要素が変更されない限り、あまり意味がありません）：

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

これはfirst hover引数、mouseoverイベントのみをバインドし、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

bind を使用することもできます。

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

commonメソッドを作成してhoverおよびclickevents。

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