Home  >  Article  >  Web Front-end  >  Solution to avoid mouse double-click using jQuery_jquery

Solution to avoid mouse double-click using jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 17:24:541124browse
Introduction
When users double-click DOM objects (such as buttons and links, etc.), it has always been a troublesome problem for user interaction. Fortunately, jQuery provides a pretty great solution. That is .one().

.one() What does this method do?
It attaches an element event handler and can only run the event handler function once per element.

Parameters
.one( events [, selector ] [, data ], handler(eventObject) )

events
Type: String
• Specifies one or more events to be added to the element. Multiple events separated by spaces. Must be a valid event. Just like "click" and "keydown.myPlugin".

Selector parameters
Parameter type: String
•The selector string is used to filter out the child elements of the selected element that can trigger the event
•If Pass null or omit, the event will be triggered when it reaches the selected element
Data
Parameter type: any type
• The value of this parameter will be passed to when the event is triggered Event handler function
Event handler function
Parameter type: function type
•Function that should be called when the event is triggered
•false is also allowed because it simply returns false; Short form of function
Example
Copy code The code is as follows:

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

Or
Copy code The code is as follows:

$("body").one(" click", "#saveBttn", function () {
alert("This displays if #saveBttn is the first thing clicked in the body.");
}); The key to the above code is:

•When the code execution ends, clicking on the element with the id saveBtn will pop up a warning box
•Following clicks will have no effect
•This is equivalent to ==>
Copy code The code is as follows:

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

In other words this It has the same effect as explicitly calling off() in the bound event handler

For more information, please click
jQuery .one()

Summary
The method mentioned above is a new feature of jQuery 1.7, so if your element click event is triggered more than once, this may be a solution. What an amazing method, please contact me if you have any questions.
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