jquery implements a long press button to trigger events

jquery implements a long press button to trigger events _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article illustrates how jquery implements a long press button trigger event. Share to everyone for your reference. The specific analysis is as follows:

Now the rapid development of mobile phone, so that many mobile phone gestures need to be made to the mobile version of the Web page process

There are many long press buttons on the web, even if only jquery mobile has a long press event

But based on a variety of compatibility issues,

Only use jquery to achieve long press action, can be on the phone side and the computer side to maintain a very strong compatibility

I. BASIC OBJECTIVES

Make a button that essentially a 100x100px layer of gray background, long pressed to 2s the text in the layer from in into out. As shown in the following illustration:

Second, the production process

The code is as follows:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" src= "Js/jquery-1.11.1.js" ></script>

<body>
<div id= "mydiv" style= "width:100px; height:100px; Background: #ddd; " >out</div>
</body>

<script>
/* Set a long press timer, if you click on the layer more than 2 seconds to trigger, mydiv inside the text from out into the action * *
var timeout;

$ ("#mydiv"). MouseDown (function () {
Timeout = settimeout (function () {
$ ("#mydiv"). Text ("in");
}, 2000);
});

$ ("#mydiv"). MouseUp (function () {
Cleartimeout (timeout);
$ ("#mydiv"). Text ("Out");
});

$ ("#mydiv"). Mouseout (function () {
Cleartimeout (timeout);
$ ("#mydiv"). Text ("Out");
});

</script>

In essence, the length of time should not be too long, because it may be with the mobile phone system part of the long press gesture conflict, but also should not be too short, because the length of time too short and click No difference,

Theoretically, the judgment long presses the end, on the handset end only sets the MouseUp movement to be possible,

However, setting up MouseUp on your PC will have the following bugs:

In the long press at the same time black layer above the text, and then drag the mouse out of the layer, you can avoid the system MouseUp of the decision, of course, the mobile phone could not achieve this action, if it is entirely to the mobile phone page, can no matter this step, but for better compatibility, or add mouseout action to fix the bug.

I hope this article will help you with your jquery programming.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jquery implements a long press button to trigger events _jquery

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support