zoukankan      html  css  js  c++  java
  • 移动端开发中的触摸事件和键盘操作

     如何关闭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);

  • 相关阅读:
    Openstack API 开发 快速入门
    virtualBox虚拟机到vmware虚拟机转换
    使用Blogilo 发布博客到cnblogs
    Openstack Troubleshooting
    hdoj 1051 Wooden Sticks(上升子序列个数问题)
    sdut 2430 pillars (dp)
    hdoj 1058 Humble Numbers(dp)
    uva 10815 Andy's First Dictionary(快排、字符串)
    sdut 2317 Homogeneous squares
    hdoj 1025 Constructing Roads In JGShining's Kingdom(最长上升子序列+二分)
  • 原文地址:https://www.cnblogs.com/BaishangBloom/p/4642521.html
Copyright © 2011-2022 走看看