手机端触摸的方向判断

function load(){
    document.addEventListener(‘touchstart‘,touch, false);
    document.addEventListener(‘touchmove‘,touch, false);
    document.addEventListener(‘touchend‘,touch, false); 

    function touch (event){
        var event = event || window.event;
        var oInp = document.getElementById("inp");
    	var distance,clientX_start,clientX_end,
    		minRange=10;
    		this.clientX_start;
    		this.direction;

    		this.callbackFun=function(){
		    if(this.direction==‘ltr‘) {
		    	console.log(‘从左往右‘);
		    	}
		    else {
		    	console.log(‘从右往左‘);
		     }
		    }
        switch(event.type){
            case "touchstart":
                clientX_start=event.touches[0].clientX;
                this.clientX_start=clientX_start;
                break;
            case "touchend":
		this.callbackFun();
                break;
            case "touchmove":
                event.preventDefault(); 

                clientX_end = event.changedTouches[0].clientX;
                //判断移动的方向
                distance=clientX_end-this.clientX_start;
                if(this.clientX_start+minRange<clientX_end) {
					this.direction=‘ltr‘;
                }
                else if(this.clientX_start-minRange>clientX_end){
                	this.direction=‘rtl‘;
                }
                break;
        }
    }
} 

window.addEventListener(‘load‘,load, false);

  

这里已经对用户的行为进行了监听,在屏幕中用手滑动就可以执行相应的程序。

时间: 2024-11-05 11:01:49

手机端触摸的方向判断的相关文章

jQuery手机端触摸卡片切换效果

效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: 1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=ed

原生js手机端触摸下拉刷新

废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!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> <met

手机端触摸位置获取

function touch(event) { var event = event || window.event; switch (event.type) { case "touchstart": console.log(event.touches[0].clientX + "," + event.touches[0].clientY); break; case "touchend": console.log(event.changedTouc

[UWP小白日记-15]在UWP手机端实时限制Textbox的输入

说实话重来没想到验证输入是如此的苦逼的一件事情. 网上好多验证都是在输入完成后再验证,我的想法是在输入的时候就限制输入,这样我就不用再写代码来验证了 应为是手机端,所以不用判断其他非法字符,直接把Textbox的属性InputScope设置为"Number"就是了,反正在目前版本的UWP中纯数字键盘还无法切换到其他的字符键盘去 下面的代码是一个金额文本框的验证,算是抛砖引玉吧.欢迎还有更好的方案指点! 直接上代码: /// <summary> /// 检查输入金额,当检测到

判断Http请求由手机端发起,还是有电脑端发起

某些情形,我们需要判断Http请求是来自手机端还是电脑端,关键是取得User-Agent的信息,进行筛选判断即可. 核心类如下: public static boolean isMobileDevice(String requestHeader){ /** * android : 所有android设备 * mac os : iphone ipad * windows phone:Nokia等windows系统的手机 */ String[] deviceArray = new String[]{

php 判断是用户是pc端还是手机端访问的方法

function getBrowserType(){ $is_mobile = false; $mobile_os_list=array('Google Wireless Transcoder','Windows CE','WindowsCE','Symbian','Android','armv6l','armv5','Mobile','CentOS','mowser','AvantGo','Opera Mobi','J2ME/MIDP','Smartphone','Go.Web','Palm'

javascript判断访问终端,手机端自动跳转

在网页的顶部加入javascript判断代码: function checkserAgent(){ var userAgentInfo=navigator.userAgent; var userAgentKeywords=newArray("Android", "iPhone" ,"SymbianOS", "Windows Phone", "iPad", "iPod", "MQ

ThinkPHP3.2判断手机端访问并设置默认访问模块的方法

ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.php文件 'MODULE_ALLOW_LIST' => 'Home,Mobile' 接下来配置Application/Common/Common/function.php文件 添加isMobile方法 [详见代码] function isMobile(){ // 如果有HTTP_X_WAP_PROF

php 判断手机端与微信

1.判断手机端 function isMobile() {   // 如果有HTTP_X_WAP_PROFILE则一定是移动设备   if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) {     return true;   }   // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息   if (isset($_SERVER['HTTP_VIA'])) {     // 找不到为flase,否则为true     return strist