Home > Article > Web Front-end > Detailed explanation of the definition and use of jQuery event dblclick

Detailed explanation of the definition and use of jQuery event dblclick

黄舟Original: 2017-06-27 10:31:361687browse

Overview

Trigger the dblclick event for each matching element.

This function will call and execute all functions bound to the dblclick event, including the browser's default behavior. You can prevent triggering the browser's default behavior by returning false in a bound function. The dblclick event is triggered when an element is double-clicked at the same point.

Parameters

fnFunctionV1.0

The handler function bound in the dblclick event of each matching element.

[data],fnString,FunctionV1.4.3

data:dblclick([Data], fn) can pass in data for function fn to process.

fn: The handler function bound in the dblclick event of each matching element.

Example

Description:

Tie "Hello World!" to the double-click event of each paragraph on the page Alert box

jQuery Code:

$("p").dblclick( function () { alert("Hello World!"); });

Example

Hide or show the element when the button is double-clicked:

$("button").dblclick(function(){
  $("p").slideToggle();
});

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>
</html>

Definition and usage
When the element is double-clicked , the dblclick event occurs. A click occurs when the mouse pointer is over an element and the left mouse button is pressed and released. If two clicks occur within a short period of time, it is a double click event. The dblclick() method triggers the dblclick event, or specifies a function to run when the dblclick event occurs. Tip: Problems may arise if dblclick and click events are applied to the same element.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
  $("p").click(function(){
    $("button").dblclick();
  });
});
</script>
</head>
<body>
<button>请双击这里</button>
<p>点击本段落会触发上面这个按钮的 dblclick 事件。</p>
</body>
</html>

The above is the detailed content of Detailed explanation of the definition and use of jQuery event dblclick. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery cannot use click event to solve the problemNext article：JQuery cannot use click event to solve the problem

See more

Detailed explanation of the definition and use of jQuery event dblclick

Related articles