English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Part One: Four touch events
1.touchstart: The touchstart event is triggered as long as the finger is placed on the screen (no matter how many fingers).
2.touchmove: When we slide our fingers on the screen, this event is triggered continuously. If we do not want the page to slide, we can use event.preventDefault to prevent this default behavior.
3.touchend: When the finger slides off the screen, the touchend event is triggered.
4.touchcancel: This event is triggered when the system stops tracking the touch. For example, if a prompt box is alert()d in the middle of the touch process, this event will be triggered, and this event is not very commonly used.
Part Two: Four touch objects
1. touches, it is an array-like object that contains all the finger information. If there is only one finger, then we use touches[0] to represent it.
2. targetTouches. The information of the finger in the target area.
3. changedTouches: The information of the finger that triggered the event most recently.
4. touchend: When the system stops tracking the touch, the information of touches and targetTouches will be deleted, and the information saved in changedTouches is the last information, which is best used for calculating finger information.
Part Three: Example1
Let's take a look at the effect diagram:
The implementation principle is very simple, it is to set the position attribute of the red circular to absolute, and then, when we slide it, the touchmove event is triggered, and the Left and top are set to the pageX and pageY of the event respectively. To ensure that the triggering center is in the same position as the center of the circle, it is only necessary to add half of the width to pageX and half of the height to pageY.
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>touchExample</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/code.jquery.com-<script src="latest.js"></script>
<style>
#touchDiv{
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
text-align: center;
line-height: 50px;
color: white;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="touchDiv">点我</div>
<script>
var touchDiv = document.getElementById("touchDiv");
var x, y;
touchDiv.addEventListener("touchstart", canDrag);
touchDiv.addEventListener("touchmove", drag);
touchDiv.addEventListener("touchend", nodrag);
function canDrag (e) {
console.log("god开始");
}
function drag (e) {
$("#touchDiv").css("left", e.touches[0].pageX-25);
$("#touchDiv").css("top", e.touches[0].pageY-25);
}
function nodrag () {
console.log("god结束");
}
</script>
</body>
</html>
第四部分：实例2
这个实例就是下拉刷新功能的实现，效果如下：
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>下拉刷新</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
color: white;
font-size: 23px;
}
.drag_to_refresh{
align-items: center;
padding-left: 155px;
background-color: #bbb;
color: yellow;
display: none;
}
.refresh{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #bbb;
color: green;
display: none;
}
.drag{
text-align: center;
background-color: lightgray;
position: relative;
padding:20px;
text-indent: 1em;
line-height: 30px;
font-size:18px;
}
</style>
</head>
<body>
<div class="header">Government Cloud</div>
<div class="drag_to_refresh"></div>
<div class="refresh">Refreshing...</div>
<div class="drag">Electronic government cloud (E-government cloud） belongs to government cloud, integrating the characteristics of cloud computing technology, optimizing, integrating and streamlining government management and service functions, and realizing various business process handling and functional services in government affairs through informationization means, providing a reliable basic IT service platform for all levels of government departments.</div>
<script>
window.onload = function () {
var initX;
var drag_content = document.querySelector(".drag");
var drag_to_refresh = document.querySelector(".drag_to_refresh");
var refresh = document.querySelector(".refresh");
drag_content.addEventListener("touchmove",drag);
drag_content.addEventListener("touchstart",dragStart);
drag_content.addEventListener("touchend",dragEnd);
function dragStart(e){
initY = e.touches[0].pageY;
console.log(initX);
}
function drag (e){
drag_to_refresh.style.display = "block";
drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
console.log(drag_to_refresh.style.height);
if(parseInt(drag_to_refresh.style.height)>=100){
// Note: Because the value of height obtained is in px units, parseInt is used for parsing
drag_to_refresh.style.height = "100px";
if(parseInt(drag_to_refresh.style.height)>80){
drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
drag_to_refresh.innerHTML = "Release to refresh";
}
}
}
function dragEnd (e){
if(parseInt(drag_to_refresh.style.height)>80){
refresh.style.display = "block";
setTimeout(reload,1000);
}
drag_to_refresh.style.display = "none";
}
function reload () {
location.reload();
}
}
</script>
</body>
</html>
The above-mentioned is the mobile touch implementation of the pull-to-refresh function introduced by the editor for everyone. I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. I am also very grateful for everyone's support of the Yell Tutorial website!
Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)