数码资讯
触摸屏中的Javascript事件分析
本文演示了触摸屏中的Javascript事件,供大家参考,具体分析如下: 首先,触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel当前移动端浏览器都支持这4个触摸事件,包括IE,因为触摸屏还支持事件,他们的目的是要指出:touchstart,
选购提示
关注价格、性能、续航、售后和真实使用场景,理性比较后再下单。
本文演示了触摸屏中的Javascript事件,供大家参考,具体分析如下:
首先,触摸事件
ontouchstart
ontouchmove
ontouchend
ontouchcancel当前移动端浏览器都支持这4个触摸事件,包括IE,因为触摸屏还支持事件,他们的目的是要指出:touchstart,鼠标悬停,MouseMove,MouseDown,松开鼠标,click1。
以下示例如下:
* onTouchEvent
* /
var div = document.getelementbyid(div);
/ / touchstart类似鼠标
div.ontouchstart =功能(e){
触摸属性事件是一个数组,一个元素表示同一时刻,
每个触摸点可以通过触摸获得多点触摸。
由于我们只有一个触摸,所以直接指向{ 0 }
VaR触摸= e.touches { 0 };
获得触摸点/当前坐标,相当于MouseEvent ClientX / clienty事件
var x = touch.clientx;
var y = touch.clienty;
};
/ / touchmove类似MouseMove
div.ontouchmove =功能(e){
为touchstart,touchmove / preventDefault和防止触摸,
浏览器缩放、滚动等。
E.preventDefault();
};
/ / touchend类似MouseUp
div.ontouchup =功能(e){
不做任何事情
};
二、手势手势事件指的是多点触摸控制旋转,拉伸等操作,如图像、页面放大、旋转。手势触发时,两个或更多的手指来触摸在同一时间。元素放大我们需要知道位置坐标:坐标我们通常用offsetx和getboundingclientrect方法获取的元素,但在手机浏览器页面中经常使用变焦,变焦元件坐标后的变化答案是不同的。一个场景来说明问题:在页面完成加载,Javascript访问元素的坐标文件(100100),那么用户缩放网页,这个时间与Javascript输出元件坐标再还(100100),但屏幕上的元素的反应地区将抵消根据缩放比率。这样你就可以打开砖游戏演示,然后等到页面完全加载,然后放大。你会发现,即使手指触摸在触摸到的地区,还可以控制球板,因为该地区已经转移。除非刷新页面或rezoomed,偏移会永远存在。
* ongestureevent
* /
var div = document.getelementbyid(div);
div.ongesturechange =功能(e){
刻度代表手势产生的刻度的刻度,小于1被减小,大于1被放大,并且原来是1。
VaR e.scale规模=;
旋转表示旋转姿态的角度,值区间{ 0360 },顺时针旋转的正值,逆时针方向的负值。
功角= e.rotation;
};
三。重力感应重力感应很简单,只有onorientationchange事件被添加到身体的节点。在这种情况下,当前手机方向的值是由window.orientation属性获得。列表中的值window.orientation如下:
0:与页面的第一个加载方向一致
- 90:顺时针方向与原方向90度
180度:转180度
90:逆时针90度,根据我的测试,Android2.1并不支持重力感应。以上是当前触摸屏事件,并没有被纳入标准,但已被广泛使用。我android2.1,没有测试其他情况下。
希望本文能对大家的javascript程序设计有所帮助。
首先,触摸事件
ontouchstart
ontouchmove
ontouchend
ontouchcancel当前移动端浏览器都支持这4个触摸事件,包括IE,因为触摸屏还支持事件,他们的目的是要指出:touchstart,鼠标悬停,MouseMove,MouseDown,松开鼠标,click1。
以下示例如下:
* onTouchEvent
* /
var div = document.getelementbyid(div);
/ / touchstart类似鼠标
div.ontouchstart =功能(e){
触摸属性事件是一个数组,一个元素表示同一时刻,
每个触摸点可以通过触摸获得多点触摸。
由于我们只有一个触摸,所以直接指向{ 0 }
VaR触摸= e.touches { 0 };
获得触摸点/当前坐标,相当于MouseEvent ClientX / clienty事件
var x = touch.clientx;
var y = touch.clienty;
};
/ / touchmove类似MouseMove
div.ontouchmove =功能(e){
为touchstart,touchmove / preventDefault和防止触摸,
浏览器缩放、滚动等。
E.preventDefault();
};
/ / touchend类似MouseUp
div.ontouchup =功能(e){
不做任何事情
};
二、手势手势事件指的是多点触摸控制旋转,拉伸等操作,如图像、页面放大、旋转。手势触发时,两个或更多的手指来触摸在同一时间。元素放大我们需要知道位置坐标:坐标我们通常用offsetx和getboundingclientrect方法获取的元素,但在手机浏览器页面中经常使用变焦,变焦元件坐标后的变化答案是不同的。一个场景来说明问题:在页面完成加载,Javascript访问元素的坐标文件(100100),那么用户缩放网页,这个时间与Javascript输出元件坐标再还(100100),但屏幕上的元素的反应地区将抵消根据缩放比率。这样你就可以打开砖游戏演示,然后等到页面完全加载,然后放大。你会发现,即使手指触摸在触摸到的地区,还可以控制球板,因为该地区已经转移。除非刷新页面或rezoomed,偏移会永远存在。
* ongestureevent
* /
var div = document.getelementbyid(div);
div.ongesturechange =功能(e){
刻度代表手势产生的刻度的刻度,小于1被减小,大于1被放大,并且原来是1。
VaR e.scale规模=;
旋转表示旋转姿态的角度,值区间{ 0360 },顺时针旋转的正值,逆时针方向的负值。
功角= e.rotation;
};
三。重力感应重力感应很简单,只有onorientationchange事件被添加到身体的节点。在这种情况下,当前手机方向的值是由window.orientation属性获得。列表中的值window.orientation如下:
0:与页面的第一个加载方向一致
- 90:顺时针方向与原方向90度
180度:转180度
90:逆时针90度,根据我的测试,Android2.1并不支持重力感应。以上是当前触摸屏事件,并没有被纳入标准,但已被广泛使用。我android2.1,没有测试其他情况下。
希望本文能对大家的javascript程序设计有所帮助。
声明:本文内容用于数码产品信息整理与选购参考,具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。