移动端触屏滑动的效果其实就是轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发,这个好像比较少用
每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
ouches: //当前屏幕上所有手指的列表targetTouches: //当前dom元素上手指的列表,尽量使用这个代替toucheschangedTouches: //涉及当前事件的手指的列表,尽量使用这个代替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事件的默认行为就是滚动。
eventpreventDefault();案例:下面给出一个案例,需在移动设备上才能看出效果。
1定义touchstart的事件处理函数,并绑定事件:
if(!!selftouch) selfslideraddEventListener('touchstart',selfevents,false);//定义touchstart的事件处理函数
start:function(event){var touch = eventtargetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touchpageX,y:touchpageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
thisslideraddEventListener('touchmove',this,false);
thisslideraddEventListener('touchend',this,false);
},
触发touchstart事件后,会产生一个event对象,event对象里包括触摸列表,获得屏幕上的第一个touch,并记下其pageX,pageY的坐标。定义一个变量标记滚动的方向。此时绑定touchmove,touchend事件。
2定义手指在屏幕上移动的事件,定义touchmove函数。
//移动
move:function(event){//当屏幕有多个touch或者页面被缩放过,就不执行move *** 作
if(eventtargetToucheslength > 1 || eventscale && eventscale !== 1) return;
var touch = eventtargetTouches[0];
endPos = {x:touchpageX - startPosx,y:touchpageY - startPosy};
isScrolling = Mathabs(endPosx) < Mathabs(endPosy) 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
if(isScrolling === 0){
eventpreventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
thissliderclassName = 'cnt';
thissliderstyleleft = -thisindex600 + endPosx + 'px';
}
},
同样首先阻止页面的滚屏行为,touchmove触发后,会生成一个event对象,在event对象中获取touches触屏列表,取得第一个touch,并记下pageX,pageY的坐标,算出差值,得出手指滑动的偏移量,使当前DOM元素滑动。
3定义手指从屏幕上拿起的事件,定义touchend函数。
//滑动释放
end:function(event){var duration = +new Date - startPostime; //滑动的持续时间
if(isScrolling === 0){ //当为水平滚动时
thisicon[thisindex]className = '';
if(Number(duration) > 10){
//判断是左移还是右移,当偏移量大于10时执行
if(endPosx > 10){
if(thisindex !== 0) thisindex -= 1;
}else if(endPosx < -10){
if(thisindex !== thisiconlength-1) thisindex += 1;
}
}
thisicon[thisindex]className = 'curr';
thissliderclassName = 'cnt f-anim';
thissliderstyleleft = -thisindex600 + 'px';
}
//解绑事件
thissliderremoveEventListener('touchmove',this,false);
thissliderremoveEventListener('touchend',this,false);
},
手指离开屏幕后,所执行的函数。这里先判断手指停留屏幕上的时间,如果时间太短,则不执行该函数。再判断手指是左滑动还是右滑动,分别执行不同的 *** 作。最后很重要的一点是移除touchmove,touchend绑定事件。
稍等上代码!!
<html><head>
<script type="text/javascript">
function show_coords(event){
var x = eventclientX;
var y = eventclientY;
var say = documentall("coords");
sayinnerHTML = "X:"+x+" Y:"+y;
saystyleposition = "absolute";
saystyleleft = x + 30;
saystyletop = y;
}
</script>
</head>
<body onmousemove="show_coords(event)">
<p id="coords"></p>
</body>
<html>
希望我的回答对你有用,有用就采纳!!!谢谢!
//html5 新增 touch 事件
//禁用手机默认的触屏滚动行为
documentaddEventListener('touchmove', function(event) {
eventpreventDefault();
}, false);
//touchstart事件
function touchSatrtFunc(evt) {
try {
//evtpreventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evttouches[0]; //获取第一个触点
var x = Number(touchpageX); //页面触点X坐标
var y = Number(touchpageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
} catch (e) {
alert('touchSatrtFunc:' + emessage);
}
}
//touchmove事件,这个事件无法获取坐标
function touchMoveFunc(evt) {
try {
//evtpreventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evttouches[0]; //获取第一个触点
var x = Number(touchpageX); //页面触点X坐标
var y = Number(touchpageY); //页面触点Y坐标
//documentgetElementById("version")innerHTML = "原:"+startY+" "+"现:"+y;
//判断滑动方向
if (y - startY > 100) {
swipeDown();
} else if(y - startY < -100){
swipeUp();
}
} catch (e) {
alert('touchMoveFunc:' + emessage);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
//evtpreventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
} catch (e) {
alert('touchEndFunc:' + emessage);
}
}
//绑定事件
function bindEvent() {
documentaddEventListener('touchstart', touchSatrtFunc, false);
documentaddEventListener('touchmove', touchMoveFunc, false);
documentaddEventListener('touchend', touchEndFunc, false);
}
//判断是否支持触摸事件
function isTouchDevice() {
//documentgetElementById("version")innerHTML = navigatorappVersion;
try {
documentcreateEvent("TouchEvent");
//alert("支持TouchEvent事件!");
bindEvent(); //绑定事件
} catch (e) {
alert("不支持TouchEvent事件!" + emessage);
}
}
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标在Canvas中的坐标位置</title>
<style>
#canvas{
border:1px solid #ccc;
width:300px;
height:300px;
overflow:hidden;
}
</style>
<script>
function get_canvas(ev,obj){
m_clientX = evclientX-objoffsetLeft;
m_clientY = evclientY-objoffsetTop;
documentgetElementById("tips")innerHTML = "当前坐标:X:"+ m_clientX + " ,Y:" +m_clientY;
}
</script>
</head>
<body>
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
</body>
</html>
兼容IE8+
用 javascript 获取当前页面上鼠标(光标)位置在许多情况下都会用到,比如拖放,悬停提示(tooltip) 等等。当然,这里我们依然要面对浏览器的兼容问题,在不同的浏览器下,对这些相关的属性处理方式也不同。
参考资料
首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解脚本之家[引用时间2018-1-18]
以上就是关于如何js实现触屏点击事件全部的内容,包括:如何js实现触屏点击事件、js如何获取鼠标在某元素移动时~鼠标指针在元素中的坐标、手机端如何用JS实现触屏等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)