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

Detailed explanation of the definition and use of jQuery event dblclick

黄舟
Release: 2017-06-27 10:31:36
Original
1748 people have browsed it

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!"); });
Copy after login

Example

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

$("button").dblclick(function(){
  $("p").slideToggle();
});
Copy after login
<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>
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template