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:涉及当前事件的手指的一个列表
         例子:移动端无缝轮播切换
     
     
     
     
     
     
     
     
     
     
              
  • 相关阅读:
    SQLSERVER中的sp_reset_connection存储过程的作用
    SQLSERVER数据库经常置疑的原因
    sqlserver2005数据库邮件
    SQLSERVER书签查找的通俗理解
    msdb数据库里的表究竟存储什么信息
    造成阻塞和死锁的3大原因:
    SQLSERVER中的锁资源类型RID KEY PAG EXT TAB DB FIL
    总结一下要影响SQLSERVER锁的申请和释放行为要考虑的因素
    Linux下getsockopt/setsockopt 函数说明
    HTTP协议详解(转)
  • 原文地址:https://www.cnblogs.com/hihao/p/7427150.html
Copyright © 2011-2022 走看看