jQueryでホバーイベントをバインドしてキャンセルする方法（コードは添付されています）

この記事では主に、bind を使用して hover メソッドをバインドする方法と、unbind を使用してバインドされたイベントをキャンセルする方法について説明します。必要な場合は参照してください。

Web デザインでは、jQuery を使用してマウス ホバー イベントに応答することがよくあります。これは、mouseover および Mouseout イベントと同じ効果がありますが、bind を使用して hover メソッドをバインドするにはどうすればよいでしょうか? unbind を使用してイベントのバインドを解除するにはどうすればよいですか?

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

まず、クリックとホバー イベントを a タグにバインドするとします。

a タグをクリックすると、バインドされたホバー イベントはまったく応答しませんが、バインドされたクリック イベントは正常に応答します。

しかし、たとえば次のように記述方法を変更すると、このコードは正常に実行できます。バインド バインド ホバーは実行できません。

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

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

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

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

ご存知のとおり、バインドされたイベントをキャンセルするには unbind 関数を使用できますが、キャンセルできるのはバインドされたイベントのみです。 jquery の hover イベントは非常に特殊で、この方法でイベントがバインドされている場合、キャンセルすることはできません。

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

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

$(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");
    }
  });
});

3. 概要

実際には、jquery を参照できます。これらの問題について、公式ドキュメントを読んだ人はほとんどいません。インターネット上のほとんどのチュートリアルでは、この方法の使用方法のみが説明されており、なぜこの方法で書かれているのかについては深く理解されていません。ご質問がございましたら、コメントを残してください。

以上がjQueryでホバーイベントをバインドしてキャンセルする方法（コードは添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。