移动viewport的相关事件


禁掉默认事件:

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

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标签防止电话和邮件形式被移动端识别

优质内容筛选与推荐>>
1、android中进程的优先级
2、Chapter 2.策略模式
3、创建子程序的理由
4、绝对定位
5、SQL学习笔记之ADO.Net.DataTable的应用


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn