jquery: ホバーイベントのキャンセルとバインドの実装コード

以下のエディターは、jqueryのhovereventをキャンセルしてバインドするための実装コードを提供します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう

Web デザインでは、マウスオーバー イベントやマウスアウト イベントと同じ効果を持つマウス ホバー イベントに応答するために jquery をよく使用しますが、bind を使用してホバー メソッドをバインドするにはどうすればよいでしょうか? unbind を使用してイベントのバインドを解除するにはどうすればよいですか?

1. hover イベントをバインドする方法

まず、次のコードを見てください。 a タグに click および hover イベントをバインドするとします。

$(document).ready(function(){
  $('a').bind({
    hover: function(e) {
      // Hover event handler
      alert("hover");
    },
    click: function(e) {
      // Click event handler
      alert("click");
    }
  });
});

a タグがクリックされると、何か奇妙なことが起こります。このうち、バインドされたホバー イベントはまったく応答しませんが、バインドされたクリック イベントは正常に応答します。

しかし、次のような別の方法で書くと、

$("a").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

このコードは正常に実行できます。

実際、いいえ、代わりに、mouseenter と Mouseleave の 2 つのイベントを使用する必要があります (これらは .hover() 関数で使用されるイベントでもあります)。そのため、次のように直接 引用できます :

$(document).ready(function(){
  $('a').bind({
    mouseenter: function(e) {
      // Hover event handler
      alert("mouseover");
    },
    mouseleave: function(e) {
      // Hover event handler
      alert("mouseout");
    },
    click: function(e) {
      // Click event handler
      alert("click");
    }
  });
});

.hover( ) は jQuery 自体によって定義されたイベントであるため、ユーザーがマウスエンターおよびマウスリーブイベントをバインドして呼び出すためのものであるため、実際のイベントではないため、当然のことながら、 のイベントパラメーターとして呼び出すことはできません。練る（）。

2. ホバーイベントをキャンセルする方法

バインドされたイベントをキャンセルするにはバインド解除関数を使用できることは誰もが知っていますが、jquery のホバーイベントはバインドを介してのみキャンセルできます。この方法でバインドされたイベントはキャンセルできません。

$("a").hover(function(){
  alert('mouseover');
}, function(){
  alert('mouseout');
})

バインドされたホバーイベントをキャンセルする正しい方法:

$('a').unbind('mouseenter').unbind('mouseleave');

3. 概要

実際、これらの問題については jquery の公式ドキュメントを参照できますが、オンラインで読んだ人はほとんどいません。ほとんどのチュートリアルは、このメソッドの使用方法を説明するだけで、なぜこのように書かれているのかについては深く理解せずに、目的を達成するだけです。

ご質問がございましたら、コメントを残してください。

以上がjquery: ホバーイベントのキャンセルとバインドの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。