• 移动端开发中的触摸事件和键盘操作


     如何关闭iOS中键盘自动大写:

      我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。


    iOS中如何彻底禁止用户在新窗口打开页面


      有时我们可能需要禁止用户在新窗口打开页面,我们可以使用a标签的target=”_self“来指定用户在新窗口打开,或者target属性保持空,但 是你会发现iOS的用户在这个链接的上方长按3秒钟后,iOS会弹出一个列表按钮,用户通过这些按钮仍然可以在新窗口打开页面,这样的话,开发者指定的 target属性就失效了,但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台则无效。

    如何解决盒子边框溢出:

    当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
    以下是四种touch事件
    touchstart:     //手指放到屏幕上时触发
    touchmove:      //手指在屏幕上滑动式触发
    touchend:    //手指离开屏幕时触发
    touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用
     
    每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
    touches:     //当前屏幕上所有手指的列表
    targetTouches:      //当前dom元素上手指的列表,尽量使用这个代替touches
    changedTouches:     //涉及当前事件的手指的列表,尽量使用这个代替touches
    这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
    clientX / clientY:      //触摸点相对浏览器窗口的位置
    pageX / pageY:       //触摸点相对于页面的位置
    screenX  /  screenY:    //触摸点相对于屏幕的位置
    identifier:        //touch对象的ID
    target:       //当前的DOM元素
     
    注意:
    手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。
    1.禁止缩放
    通过meta元标签来设置。
    <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
    2.禁止滚动
    preventDefault是阻止默认行为,touch事件的默认行为就是滚动。
    event.preventDefault();

    box.addEventListener('touchmove', function(event) 
              { // 如果这个元素的位置内只有一个手指的话
                            if (event.targetTouches.length == 1) 
                      {
                            var touch = event.targetTouches[0];
                              // 把元素放在手指所在的位置
                              box.style.left = touch.pageX + 'px';
                                     box.style.top = touch.pageY + 'px';
                            }
            }, false);

  • 相关阅读:
    宏观经济指标
    Poloniex API 文档
    雪球释老毛推荐的投资者书单
    数字货币开源项目——貔貅
    数字货币量化分析报告_20170905_P
    数字货币量化分析报告_2017-09-05
    数字货币量化分析报告_2017-09-04
    ICO成本价
    Python3使用Print输出带颜色字体
    Ta-lib函数功能列表
  • 原文地址:https://www.cnblogs.com/BaishangBloom/p/4642521.html
Copyright © 2020-2023  润新知