mouseover（）およびmouseout（）でoff（）メソッドを使用します。

Question

私のタイトルには、mouseover/mouseoutと組み合わせたJQueryのオフメソッドを使用する際の問題があります。

私のHTMLコード（関連部分）：

<h3>Hover</h3> 
<p id="hover">Move the mouse pointer over this paragraph.</p> 
<button id="off">Press the button</button> 

私のjQueryのコード（関連部分）：

$(document).ready(function(){ 
    $("#hover").mouseover(function(){ 
     $("#hover").css("background-color", "green"); 
    }); 
    $("#hover").mouseout(function(){ 
     $("#hover").css("background-color", "lightblue"); 
    }); 
    $("#off").click(function(){ 
     $("#hover").off("click"); 
    }); 
}); 

"ホバー-部" は正常に動作します。しかし、マウスオーバーやマウスアウトを停止するはずのボタンを押すと、停止しません。

Answer 1

あなたは、このようにイベントハンドラをオフに設定するjQueryのunbindを、使用する必要があります。このことができます

$("#hover").unbind("mouseover mouseout"); 

$(document).ready(function(){ 
 
    $("#hover").mouseover(function(){ 
 
     $(this).css("background-color", "green"); 
 
    }); 
 
    $("#hover").mouseout(function(){ 
 
     $(this).css("background-color", "lightblue"); 
 
    }); 
 
    $("#off").click(function(){ 
 
     $("#hover").unbind("mouseover mouseout"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Hover</h3> 
 
<p id="hover">Move the mouse pointer over this paragraph.</p> 
 
<button id="off">Press the button</button>

希望を！

Answer 2

要素にはclickイベントリスナーが追加されていませんが、mouseoverとmouseoutが追加されています。したがって、off()は効果を持ちません。用途：

$("#hover").off("mouseover mouseout"); 

$(document).ready(function(){ 
 
    $("#hover").mouseover(function(){ 
 
     $("#hover").css("background-color", "green"); 
 
    }); 
 
    $("#hover").mouseout(function(){ 
 
     $("#hover").css("background-color", "lightblue"); 
 
    }); 
 
    $("#off").click(function(){ 
 
     $("#hover").off("mouseover mouseout"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Hover</h3> 
 
<p id="hover">Move the mouse pointer over this paragraph.</p> 
 
<button id="off">Press the button</button>