jQuery implements long press button trigger event

Home

Web Front-end

JS Tutorial

jQuery implements long press button trigger event_jquery

May 16, 2016 pm 04:16 PM

jquery button method trigger event Press

The example in this article describes how jQuery implements long-press button triggering events. Share it with everyone for your reference. The specific analysis is as follows:

The rapid development of mobile phones now requires many mobile phone gestures to be made into mobile web pages

There are many long-press button plug-ins on the Internet, and even jQuery Mobile has long-press events

But due to various compatibility issues,

Only use jquery to implement the long press action, which can maintain strong compatibility between mobile phones and computers

1. Basic goals

Create a button, which is essentially a layer with a gray background of 100x100px. If you press and hold it for 2 seconds, the text in the layer will change from in to out. As shown below:

2. Production process

The code is as follows:

Copy code The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<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> 

</head> 

<body> 

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

</body> 

</html> 

<script> 

/*Set a long press timer. If this layer is clicked for more than 2 seconds, it will be triggered. The text in mydiv will change from out to in*/ 

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 long press time should not be too long, because this may conflict with some long press gestures of the mobile phone system, but it should not be too short, because there is no difference between a long press time and a click,

Theoretically, to determine the end of a long press, just set the mouseup action on the mobile phone,

However, only setting mouseup on PC will have the following bugs:

Dark the text on the layer while long pressing, and then drag the mouse out of the layer, you can avoid the system mouseup judgment. Of course, this action cannot be realized on the mobile phone. If it is completely written to For web pages on mobile phones, this step can be completely ignored. However, for better compatibility, the mouseout action is added to correct this bug.

I hope this article will be helpful to everyone’s jQuery programming.

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