zoukankan      html  css  js  c++  java
  • 05移动端事件

    一、移动端三大事件    
         1、手指按下     ontouchstart
         2、手指触摸     ontouchmove     
         3、手指抬起     ontouchend
    //注意:在移动开发时,浏览器模拟器时好时坏,一般不用onX的方式绑定事件函数,要用事件绑定的方式(即第二种)
    div.ontouchstart = function(){};
    div.addEventListener('touchstart', function(){});
     
    二、PC端事件在移动端(出现的问题)
         1、PC端事件在移动端略慢,大概300ms左右
         2、阻止PC事件
    document.addEventListener('touchstart', function(ev){
        ev.preventDefault();
    });
              作用与问题:
                   1、移动端的点透     问题:当上层元素发生点击时,下层元素也有点击特性。300ms之后,如果上层元素消失或隐藏,目标点会“漂移”到下层元素身上,就会触发点击行为
                        解决:法1. 下层不要使用有焦点特性的元素(如a或者其他有点击行为的元素)     法2. 阻止PC事件
    document.addEventListener('touchstart', function(ev){
        ev.preventDefault();
    });
    p.addEventListenr('touchstart', function(){     //这边click 改为 touchstart
        alert(111);
    });    
                   2、解决IOS10下meta中禁止用户缩放功能
                   3、解决IOS10下溢出隐藏问题
                   4、禁止系统默认的滚动条
                   5、禁止长按选中文字、图片,系统默认菜单
                   6、问题:阻止了元素的焦点行为
    //解决方法(解决因为document的阻止事件导致的 input 框不能触焦问题)
    txt.addEventListenr('touchstart', function(ev){
        ev.stopPropagation();
    });
     
    三、移动端事件对象(当给某元素加上绑定事件函数之后,事件函数默认第一个参数就是事件对象。事件对象:用户在浏览器下触发某个行为,事件对象会记录用户操作时的相关细节(如位置信息等))
         1、touches:当前位于 屏幕(包括dom元素之外) 上的所有手指的列表
         2、targetTouches:位于当前 DOM 元素上(当前dom元素之外的无法获取)的手指的列表
         3、changedTouches:涉及当前事件的手指的一个列表
         例子:移动端无缝轮播切换
     
     
     
     
     
     
     
     
     
     
              
  • 相关阅读:
    给tkinter文本框添加右键菜单
    Python读取图片尺寸、图片格式
    sublime text 3 build 3143 安装详解
    一种使用pyinstaller时图标问题解决方案
    讠己 —— 冫欠 自 云力 扌仓 石马
    python桌面端开发手记(序列化、压缩包、加密、图形界面GUI)
    Spark安装过程纪录
    Zookeeper与HBse安装过程纪录
    搭建分布式Hadoop的填坑纪录
    使用几种常见分类器预测海难幸存者(二分类)
  • 原文地址:https://www.cnblogs.com/hihao/p/7427150.html
Copyright © 2011-2022 走看看