当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。