公司有触控屏装备采纳WIN7体系,一般网页翻开后触屏操控如滑动网页没有结果,需在网页代码中增加JS处置惩罚touch事宜网页的手势滑动结果。固然起首须要webkit内核支撑touch事宜。
以下内容援用http://www.cnblogs.com/zourong/p/3913446.html
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指脱离屏幕时触发
touchcancel: //体系作废touch事宜的时刻触发,这个彷佛比较罕用
每一个触摸事宜被触发后,会天生一个event对象,event对象里分外包含以下三个触摸列表
touches: //当前屏幕上一切手指的列表
targetTouches: //当前dom元素上手指的列表,只管运用这个替代touches
changedTouches: //触及当前事宜的手指的列表,只管运用这个替代touches
这些列内外的每次触摸由touch对象构成,touch对象里包含着触摸信息,重要属性以下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
注重:
手指在滑动全部屏幕时,会影响浏览器的行动,比方转动和缩放。所以在挪用touch事宜时,要注重制止缩放和转动。
1.制止缩放
经由过程meta元标签来设置。
<meta name=”viewport” content=”target-densitydpi=320,width=640,user-scalable=no”>
2.制止转动
preventDefault是阻挠默许行动,touch事宜的默许行动就是转动。
event.preventDefault();
以下援用自http://blog.csdn.net/jiangcs520/article/details/17564065
许多博文中称touch的三个事宜都有targetTouches,touches以及changedTouches对象列表,其实不然,touchend事宜中应该是只要个changedTouches触摸实例列表的,而且这里申明一下,回调函数的event只是一个一般的object对象,实际上event中有一个originalEvent属性,这才是真正的touch事宜,这个事宜中才存在着上诉三个触摸实例列表,这三个实例存储了触摸事宜的位置等等属性,类似于鼠标事宜。其他地方基础与鼠标事宜是一致的。简朴引见一下这三个触摸列表,touches是在屏幕上的一切手指列表,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事宜时,event.originalEvent是没有这个targetTouches列表的,而changedTouches列表是触及当前事宜的列表,比方touchend事宜中,手指移开。
依据以上2篇文章处置惩罚网页,对body举行pageY轴盘算滑动间隔,举行页面转动;
在touchend事宜中运用originalEvent.changedTouches[0].target属性推断链接目的举行点击。
<script type="text/javascript">
$(document).ready(function(){
var startY = 0;
var tObj = {pageY:0,isdown:false};
$(".body").unbind('touchstart').bind('touchstart',function(e){
e.preventDefault();
tObj.pageY = e.originalEvent.targetTouches[0].pageY ;
tObj.isdown = true;
});
$("body").unbind('touchmove').bind('touchmove',function(e){
e.preventDefault();
if(tObj.isdown==true)
{
var dy =tObj.pageY -e.originalEvent.targetTouches[0].pageY;
startY = startY+dy;
if(Math.abs(dy)>=10)
{
window.scrollTo(0,startY);
}
}
});
$(".body").unbind('touchend').bind('touchend',function(e){
e.preventDefault();
tObj.pageY = 0 ;
tObj.isdown = false;
e.originalEvent.changedTouches[0].target.click();
});
});
</script>