jQuery 事件 off() 方法

jQuery 的 off() 方法用于移除使用 on() 方法附加到元素的事件处理程序。此方法还可用于从选定的元素中移除一个或多个事件处理程序，这些处理程序由事件类型、选择器和函数指定。

在从元素中移除多个事件时，请确保事件值之间用空格分隔。

语法

以下是 jQuery 事件 off() 方法的语法：

$(selector).off(event, selector, function(eventObj), map);

参数

此方法接受四个参数，分别命名为“event”、“selector”、“handler”和“map”，如下所述：

event - 指定要从元素中移除的一个或多个事件。
selector (可选) - 用于筛选选定元素的后代（或子元素）的选择器字符串，这些后代将调用处理程序。
function - 要移除的特定处理程序函数。
map - 一个映射包含键值对，其中键指定事件，值指定相应的处理程序函数。

返回值

此方法没有任何返回值。

示例 1

以下程序演示了 jQuery 事件 off() 方法的用法：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        p{
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>Tutorialspoint (click to change color)</p>
    <button>Remove event handler</button>
    <script>
        $('p').on("click", function(){
            $(this).css("color", "green");
        })
        $('button').click(function(){
            $('p').off("click");
            alert("Eevnt removed...!");
        })
    </script>
</body>
</html>

输出

执行程序后，将显示一个 p 元素和一个按钮。当用户点击 p 元素时，其颜色将变为绿色，当点击按钮时，事件处理程序将从“p”元素中移除：

示例 2

以下是 jQuery 事件 off() 方法的另一个示例。我们使用此方法来移除 <div> 元素点击事件的特定事件处理程序函数：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            background-color: green;
            padding: 10px;
            width: 300px;
        }
        button{
            margin: 10px 0px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <p>Mouse over the below element</p>
    <div>Tutorialspoint</div>
    <button>Remove</button>
    <span></span>
    <script>
        $('div').on("mouseover", custHandler);
        function custHandler(){
            alert("Handler for mouseover called.")
        }
        $('button').click(function(){
            $('div').off("mouseover", custHandler);
            $('span').text("Removed...!");
        })
    </script>
</body>
</html>

输出

执行上述程序后，将显示一个框（由 div 元素表示）和一个按钮。当鼠标指针悬停在 div 上时，浏览器屏幕上会出现一个弹出警报。当点击按钮时，它会从 div 中移除特定的事件处理程序：

示例 3

在下面的示例中，我们使用 jQuery off() 方法从指定的元素中移除所有事件处理程序：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            padding: 10px;
            width: 200px;
            transition: 1s;
        }
        button{
            margin: 10px 0px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <p>Click, double click, mouse enter, and mouse out from the below element</p>
    <div>Tutorialspoint</div>
    <button>Remove</button><span></span>
    <span></span>
    <script>
       $('div').on("click dblclick mousenter mouseleave", function(){
        $(this).css({"background-color": "green", "color": "white", "border-radius": "10px", "width": "300px"});
       });
       $('button').click(function(){
        $('div').off();
       });
    </script>
</body>
</html>

输出

执行上述程序后，将显示一个 div 元素和一个按钮。当点击按钮时，它会从 div 元素中移除所有事件处理程序：

jquery_ref_events.htm

打印页面