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

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

时间: 2024-11-08 13:14:11

移动端开发中的触摸事件和键盘操作的相关文章

Lua中添加触摸事件

1首先,lua中的触摸事件与cocos2d中的触摸事件相似,都需要添加监听者,都需要将监听者添加到触摸事件分发器中去 local listener=cc.EventListenerTouchOneByOne:create() listener:registerScriptHandler(onTouchBegan,cc.Handler.EVENT_TOUCH_BEGAN ) listener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_T

Android中TouchEvent触摸事件机制

当我们的手指在Android屏幕上点击或滑动时,就会触发触摸事件TouchEvent.在App中ViewGroup和View存在多级嵌套,在最外层的是Activity,最内层的View,介于Activity与View之间的是一些ViewGroup.本文为了简化讨论,我们假设一个Activity中只有一个ViewGroup,这个ViewGroup中只有一个View.当我们用手指触摸到View的UI时,就会产生触摸事件TouchEvent,总的过程如下图所示: 首先是最外层的Activity接收到该

关于在Cocos2dx中注册触摸事件——Lua

关于在Cocos2dx中注册触摸事件,之前一直对此一知半解,这两天在看引擎的源码,趁此机会写下来... 以下纯属个人理解,如有不对欢迎指正... 在引擎的CCLayer类中声明了有四个方法: 1 virtual bool onTouchBegan(Touch *touch, Event *unused_event); 2 virtual void onTouchMoved(Touch *touch, Event *unused_event); 3 virtual void onTouchEnde

【转载】Quick 中的触摸事件

原文地址 http://cn.cocos2d-x.org/article/index?type=quick_doc&url=/doc/cocos-docs-master/manual/framework/quick/V3/touch-events/zh.md Quick 中的触摸事件 Cocos2d-x 原本的触摸机制存在一些限制,在使用中需要开发者做不少额外的处理.所以 Quick-Cocos2d-x 提出了自己的一套触摸机制.本文详细介绍了这套新机制的用法. 显示层级 在 Cocos2d-x

黑马程序员--微信公众平台开发中的结合BAE进行IO操作的一些要点

微信公众平台开发中的结合BAE进行IO操作的一些要点进行整理,主要是为了实现图文消息的上传,和用模拟登陆的方式下载客户发送给公众账号的语音消息.图片消息等. package com.weinxin.utils; import com.baidu.inf.iis.bcs.BaiduBCS; import com.baidu.inf.iis.bcs.auth.BCSCredentials; public class BaiduBCSTools { public static String ACCES

iOS开发笔记--iOS中的触摸事件和手势处理

iOS中的事件可以分为三大类:原文:http://my.oschina.net/aofe/blog/268749 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication,UIViewController,UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIRespon

iOS中的触摸事件

1.响应者对象 iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件,我们称之为“响应者对象”. UIApplication.UIViewController.UIView都继承自UIResponder,因此他们都是响应者对象,都能够接收并处理事件. 2.UIResponde UIResponder内部提供了以下方法来处理事件 触摸事件: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)e

IOS开发—事件处理,触摸事件,UITouch,UIEvent,响应者链条,手势识别

触摸事件 在用户使用app过程中,会产生各种各样的事件 一.iOS中的事件可以分为3大类型 触摸事件加速计事件远程控制事件 响应者对象在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为“响应者对象” UIApplication.UIViewController.UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件 二.UIResponder UIResponder内部提供了以下方法来处理事件触摸事件- (v

iOS中的触摸事件和手势处理

iOS中的事件可以分为三大类: 1> 触摸事件 2> 加速计事件 3> 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication,UIViewController,UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIResponder UIResponder内部提供了方法来处理事件; 1> 触摸事件 一