當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .one()用法及代碼示例


用法 
.one( events [, data ], handler ) => jQuery

說明：將處理程序附加到元素的事件。每個事件類型的每個元素最多執行一次處理程序。

  • 添加的版本：1.1.one( events [, data ], handler )

    • events
      類型：String
      包含一種或多種 JavaScript 事件類型的字符串，例如 "click" 或 "submit," 或自定義事件名稱。
    • data
      類型：PlainObject
      觸發事件時要傳遞給 event.data 中的處理程序的數據。
    • handler
      類型：Function(Event eventObject)
      觸發事件時執行的函數。

  • 添加的版本：1.7.one( events [, selector ] [, data ], handler )

    • events
      類型：String
      一種或多種以空格分隔的事件類型和可選的命名空間，例如 "click" 或 "keydown.myPlugin"。
    • selector
      類型：String
      一個選擇器字符串，用於過濾觸發事件的選定元素的後代。如果選擇器為null 或省略，則始終在到達選定元素時觸發事件。
    • data
      類型：Anything
      觸發事件時要傳遞給 event.data 中的處理程序的數據。
    • handler
      類型：Function(Event eventObject)
      觸發事件時執行的函數。值 false 也允許作為簡單執行 return false 的函數的簡寫。

  • 添加的版本：1.7.one( events [, selector ] [, data ] )

    • events
      類型：PlainObject
      一個對象，其中字符串鍵表示一個或多個空格分隔的事件類型和可選的命名空間，值表示要為事件調用的處理函數。
    • selector
      類型：String
      一個選擇器字符串，用於過濾將調用處理程序的選定元素的後代。如果選擇器為 null 或省略，則處理程序總是在到達所選元素時被調用。
    • data
      類型：Anything
      發生事件時要傳遞給 event.data 中的處理程序的數據。

.one() 方法與 .on() 相同，隻是給定元素和事件類型的處理程序在第一次調用後未綁定。例如：

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

執行代碼後，單擊 ID foo 的元素將顯示警報。隨後的點擊將無濟於事。這段代碼相當於：

$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});

換句話說，從regularly-bound 處理程序中顯式調用.off() 具有完全相同的效果。

如果第一個參數包含多個以空格分隔的事件類型，則事件處理程序稱為 once for each event type 。

$( "#foo" ).one( "click mouseover", function( event ) {
  alert( "The " + event.type + " event happened!" );
});

在上麵的示例中，由於 two 事件類型(click 和 mouseover)，警報可能會顯示兩次。

例子：

將一次性單擊綁定到每個 div。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    background: green;
    border: 10px outset;
    cursor:pointer;
  }
  p {
    color: red;
    margin: 0;
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
 
<script>
var n = 0;
$( "div" ).one( "click", function() {
  var index = $( "div" ).index( this );
  $( this ).css({
    borderStyle: "inset",
    cursor: "auto"
  });
  $( "p" ).text( "Div at index #" + index + " clicked." +
    " That's " + (++n) + " total clicks." );
});
</script>
 
</body>
</html>

演示：

要在第一次單擊每個段落時在警報框中顯示所有段落的文本：

$( "p" ).one( "click", function() {
  alert( $( this ).text() );
});

事件處理程序將每個事件類型的每個元素觸發一次

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div class="count">0</div>
<div class="target">Hover/click me</div>
 
<script>
var n = 0;
$(".target").one("click mouseenter", function() {
  $(".count").html(++n);
});
</script>
 
</body>
</html>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .one()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。