5

JQueryを使用して、要素にホバー状態があるときにいくつかの関数をチェーンしようとしています。

私は通常.hoverイベント関数を使用しますが、いくつかのチュートリアルを読んだ後、.on1​​つのイベントハンドラーを使用してドキュメント内のすべてのバブリングイベントを監視できるため、使用する方が良いことを読みました。

ただし、次のように2つの関数をチェーンすると問題が発生します。

$("element").on( "hover", function() {         
    console.log("one");     
}, function() {         
    console.log("two");     
});

結果は1つ2つ になると予想していましたが（を使用した場合.hover）、代わりに2つ2つになります。

誰かが私が間違っていること、またはこれが予想される動作であるかどうか、そしてその理由を説明できますか？

使用して複製：http .hover(...)：//jsfiddle.net/gXSdG/

使用して複製：http .on(hover...)：//jsfiddle.net/gXSdG/1/

4

2 に答える 2

30

.on()取ることができる関数は1つだけなので、合格者に問い合わせてevent、イベントが何であったかを確認する必要があります。これを試して：

$("element").on("hover", function(e) {
    if (e.type == "mouseenter") {
        console.log("one");   
    }
    else { // mouseleave
        console.log("two");   
    }
});

フィドルの例

または、メソッドを構成する2つのイベントを分割することもできますhover()-mouseenterおよびmouseleave：

$("#element").on("mouseenter", function() {
  console.log("one");   
}).on('mouseleave', function() {
  console.log("two");   
});
#element {
  background-color: black;
  height: 100px;
  margin: 100px;
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

于 2012-05-28T19:30:27.960 に答える
2

そもそも何が起こっているのか混乱しているだけです。どちらの例にも関数チェーンはありません。hoverとのAPIonは異なります。注意深くお読みください。問題に関連する概要は、次のとおりです。

hover1つまたは2つの引数、両方の関数を取ります。1つ目はマウスが入ったときに実行され、2つ目はマウスが離れたときに実行されます。

onコールバックは1つだけで、最初の関数は別のパラメーターに使用されるため使用されません。2番目の関数はコールバックとして使用され、すべてのホバーイベント、つまりマウスのEnterとLeaveで呼び出されます。

于 2012-05-28T19:34:02.517 に答える