Analysis of javascript mobile phone gesture action touch touch screen principle-JS Tutorial-php.cn

Analysis of javascript mobile phone gesture action touch touch screen principle

黄舟

Release： 2017-02-11 14:22:52

Original

1341 people have browsed it

We have done many touch screen special effects before, so, today, we will analyze the touch screen principle of js.

Analysis of javascript mobile phone gesture action touch touch screen principle

Let’s illustrate with an example today. In implementing the touch screen, we must use js's addEventListener, and then add
touchstart, touchmove, touchend. Today we added jquery to our code, which is just used to obtain ID and CSS. Haha, after all, everyone in JQ is using it. But for adding events, you still have to use the document, getElementById mode, because this thing is only available in JS, and there is no such thing as
TOUCH in JQUERY.

Analysis of javascript mobile phone gesture action touch touch screen principle

As you can see, there is this sentence in the code, e.preventDefault(). If you don’t write this sentence, when you touch the screen, the page will Slide, so its effect is huge. . .

What does e.touches[0] mean? It's the first gesture, let's think of it as touch. There are other two-finger gestures on the touch screen. Let's learn one today, hehe. . .

We obtain the left, top and hand touch screen positions of the object. At this time, touchstart is completed. . .

Analysis of javascript mobile phone gesture action touch touch screen principle

Our isdrag is used to determine whether it can be dragged. The position after dragging by hand plus the position of the object minus the position when touchstart is obtained. The moved position can be obtained. In this way, we have completed the touchmove process. .

For touchend, we write ifdrag=false, which means no more dragging. . .

Demo code

<!DOCTYPE>
<html> 
<head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="MobileOptimized" content="320"/>
<title>触屏特效,手机网页</title>
<style type="text/css">
    html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}    
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0;padding:0;}    
    .dragme{background:#000;
    width:60px;height:60px; 
    color:#fff; position:absolute; left:40px; top:40px; text-align:center; line-height:60px;}   
</style>   
<script type="text/javascript" src=" 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>   
<body>   
<div id="moveid" class="dragme"> 
    lvtao.net</div> <script type="text/javascript"> var isdrag=false;   
var tx,x,ty,y;    
$(function(){   
    document.getElementById("moveid").addEventListener(&#39;touchstart&#39;,touchStart);  
    document.getElementById("moveid").addEventListener(&#39;touchmove&#39;,touchMove);	document.getElementById("moveid").addEventListener(&#39;touchend&#39;,function(){  
        isdrag = false;  
    }); 
});function touchStart(e){   
   isdrag = true; 
   e.preventDefault();
   tx = parseInt($("#moveid").css(&#39;left&#39;));    
   ty = parseInt($("#moveid").css(&#39;top&#39;));  
   x = e.touches[0].pageX;
   y = e.touches[0].pageY;  
}   
function touchMove(e){   
  if (isdrag){
   e.preventDefault();	   var n = tx + e.touches[0].pageX - x;	   var h = ty + e.touches[0].pageY - y;   
	   $("#moveid").css("left",n); 
	   $("#moveid").css("top",h);    
   }  
}    
</script> </body></html>

Copy after login

The above is the analysis of the javascript mobile phone gesture action touch touch screen principle. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!