移动viewport的相关事件

Posted 2022-03-23 mmxuehan

禁掉默认事件：

在移动端开发时，会有很多默认事件，通常需要禁止所有的默认事件。

document.addeventListener(“touchstart”,function(e)
    e=e||event;
    e.preventDefault();
)

移动端常用的事件是touchstart（手指触摸），touchmove（手指滑动），touchend（手指抬起）

在禁掉默认时间的同时，会把所有的a标签也禁掉。

重新开启a标签，并且防止误触

var aNode = document.querySelectorAll("a");
for (var i=0;i<aNode.length;i++) 
         aNode[i].addEventListener("touchstart",function()
                   this.isMoved=false;
         )
         aNode[i].addEventListener("touchmove",function()
                   this.isMoved=true;
         )
         aNode[i].addEventListener("touchend",function()
                   if(!this.isMoved)
                            location.href=this.href;
                   
         )

关于arguments：

函数中的arguments参数：changedTouches、targetTouches、touches所代表的含义

changedTouches:触发当前事件的手指列表。

targetTouches：触发当前事件时元素的手指列表。

touches：触发当前事件时屏幕的手指列表。

最常用的是changedTouches。

changedTouches返回的是触发当前事件的手指触摸点。

targetTouches返回的是触发当前事件后依然留在该元素的手指触摸点。

touches：返回的是触发当前事件后依然留在屏幕的手指触摸点。

这三个都是数组。

获取滑动时手指的位置：

div.addEventListener("touchstart",function()
)
//touchmove不能单独触发
div.addEventListener("touchmove",function(e)
         e=e||event;
         var touch = e.changedTouches[0];
         div.innerhtml=touch.clientX+"<br>"+touch.clientY;
)

 移动端重置样式：

a-webkit-tap-highlight-color: transparent;//移动端特有的点击高亮效果
input-webkit-appearance:none;//移动端按钮设置圆角不能正常显示
<meta name="format-detection" content="telephone=no,email=no">//meta标签防止电话和邮件形式被移动端识别