Question

正如我的标题所示，使用JQuery中的off-method结合mouseover / mouseout我遇到了问题。

我的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");
    });
});

＆＃34; hover-part＆＃34;工作良好。但是，当我按下按钮，它应该停止鼠标悬停和鼠标停止方法停止时，它不会。

Answer 1

您应该使用jQuery＆＃39; unbind来设置这样的事件处理程序：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助！

Answer 2

该元素未添加click个事件侦听器，但mouseover和mouseout。因此，没有off()没有效果。使用：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在mouseover（）和mouseout（）上使用off（） - 方法

2 个答案: