移动Web特效开发

最新推荐文章于 2024-10-04 06:11:34 发布

致我们喂了狗的青春

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量281

点赞数 1

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/Aloun/article/details/107112234

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

- - 移动Web特效开发(部分)

移动Web特效开发(部分)

移动上的事件

移动上的click

 /* 在手机端的点击事件有300毫秒的延迟  这是以为手机屏幕需要是被用户的	   	 操作到底是点击还是拖拽 如果300毫秒内没有任何操作视为点击,但是 如	果兼容了手机屏幕就不会存在延迟问题*/
var span = document.getElementsByTagName('span')[0];
span.onclick = function(){
	alert('点击了span元素');
};

触摸事件

事件	描述
touchstart	手指刚接触屏幕时触发
touchmove	手指在屏幕上移动时触发
touchend	手指从屏幕上移开时触发

这些事件得到了大多数触屏浏览器的支持,但IE浏览器是个例外.

/* 触摸事件 至于移动端有触摸事件 PC端没有*/
/* 触摸开始事件 */
span.addEventListener("touchstart",function (event) {
    console.log(event);
    div.style.display = "block";
    console.log("我们监听到触摸事件")
},false);
/* 触摸当中事件 */
span.addEventListener("touchmove",function (event) {
    console.log("用户在移动")
});
/* 触摸结束事件 */
span.addEventListener("touchend",function (event) {
    div.style.display = "none";
    console.log("触摸结束");
    console.log(event);
},false)

addEventListener是一个侦听事件并处理相应事件的函数.一般有三个参数:第一个是事件的类型,第二个是侦听到事件后处理事件的函数,第三个是事件捕获(只有两个值,true和false)

PS:由于触摸会导致屏幕动来动去,因此可以通过在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动

除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性:

touches:表示当前跟踪的触摸操作的touch对象的数组
- 当一个手指在触屏上时,event.touches.length=1
- 当两个手指在触屏上时,event.touches.length=2,以此类推
changedTouches:导致触摸事件被触发的触摸点数组
targetTouches:特定于事件目标的touch对象数组

触摸事件坐标

属性	描述
clientX	触摸目标在视口中的X坐标
clientY	触摸目标在视口中的Y坐标
identifier	表示触摸的唯一ID
pageY	触摸目标在页面中的Y坐标
screenX	触摸目标在屏幕中的X坐标
screenY	触摸目标在屏幕中的Y坐标
target	触摸的DOM节点目标