jqueryホバーイベントをキャンセルしてバインドする正しい方法の詳細な説明

Webデザインでは、マウスホバーイベントに応答するためにjqueryをよく使用しますが、これはmouseoverイベントやmouseoutイベントと同じ効果がありますが、onを使用してhoverメソッドをバインドするにはどうすればよいですか? offを使用してバインドされたイベントをキャンセルするにはどうすればよいですか?
1. ホバーイベントをバインドする方法
まず、クリックとホバーイベントを a タグにバインドするとします。

$(document).ready(function(){ $('a').on({ 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イベントを使用する必要があります(これは.hover()functionで使用されるイベントでもあります)
したがって、次のように直接引用できます:

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

.hover() は jQuery 自体によって定義されたイベントであるため、ユーザーがマウスエンターとマウスリーブイベントをバインドして呼び出すためのものではありません。実際のイベントなので、もちろん .on() のイベントパラメータとして呼び出すことはできません。 2. hover イベントをキャンセルする方法
バインドされたイベントをキャンセルするには off 関数を使用できることは誰もが知っていますが、この方法を使用する場合、jquery の hover イベントは非常に特殊です。ホバー イベントをキャンセルする場合、バインドされたイベントはキャンセルできません。

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

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

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

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