首頁 >web前端 >前端問答 >jquery怎麼禁止某個事件

jquery怎麼禁止某個事件

WBOY
WBOY原創
2022-05-23 10:17:052897瀏覽

jquery禁止某個事件的方法:1、利用unbind()方法,語法為「元素物件.unbind(禁止的事件)」;2、利用off()方法,語法為「元素物件. off(禁止的事件或命名空間)”,該方法通常用於移除透過on()方法新增的事件處理程序。

jquery怎麼禁止某個事件

本教學操作環境:windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery怎麼禁止某個事件

1、unbind() 方法

unbind() 方法移除被選元素的事件處理程序。

此方法能夠移除所有的或被選取的事件處理程序,或當事件發生時終止指定函數的執行。

此方法也可以透過 event 物件取消綁定的事件處理程序。此方法也用於對自身內部的事件取消綁定(例如當事件已被觸發一定次數之後,刪除事件處理程序)。

注意:如果未規定參數,則 unbind() 方法會刪除指定元素的所有事件處理程序。

注意:unbind() 方法適用於任意由 jQuery 新增的事件處理程序。

語法

$(selector).unbind(event,function,eventObj)
  • event 可選。規定一個或多個要從元素移除的事件。由空格分隔多個事件值。如果只規定了該參數,則會刪除綁定到指定事件的所有函數。

  • function 可選。規定從元素上指定事件取消綁定的函數名稱。

  • eventObj 可選。規定要使用的移除的 event 物件。這個 eventObj 參數來自事件綁定函數。

範例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>点击任意段落(p 元素),该段落就会消失。</p>
<button>移除所有段落(p 元素)的事件句柄</button>
</body>
</html>

輸出結果:

jquery怎麼禁止某個事件

2、off() 方法

off() 方法通常用於移除透過 on() 方法新增的事件處理程序。

語法

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

event 必要。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效的事件。

selector 可選。規定新增事件處理程序時最初傳遞給 on() 方法的選擇器。

function(eventObj) 可選。規定當事件發生時運行的函數。

map 規定事件映射 ({event:function, event:function, ...}),包含要新增至元素的一個或多個事件,以及當事件發生時執行的函數。

範例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");
  });
});
</script>
</head>
<body>
<p>点击这个段落修改它的背景颜色。</p>
<p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
<button>移除 click 事件句柄</button>
</body>
</html>

輸出結果:

jquery怎麼禁止某個事件

#相關影片教學推薦:jQuery影片教學

以上是jquery怎麼禁止某個事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn