ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。