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.com/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.com/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.com/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

列印頁面