移动前端javascript事件
移动端事件:
// 手势事件
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel // 触摸事件
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend // 屏幕旋转事件
onorientationchange // 检测触摸屏幕的手指何时改变方向
orientationchange // touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX // Relative to the screen
screenY // Relative to the screen
pageX // Relative to the full page (includes scrolling)
pageY // Relative to the full page (includes scrolling)
target // Node the touch event originated from
identifier // An identifying number, unique to each touch event
屏幕旋转事件:
// 判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};
};
// 添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
双手指滑动事件:
// 双手指滑动事件
addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;},
false // 兼容各浏览器,表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ,而后执行相应操作
return true;
};
在互联网中,一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件,但是在移动前端,用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发,但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。
在移动端的手势事件一般有四种情况:
touchstart: 手指放到屏幕上的时候触发
touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。 前三者应用很广泛,第四个应用较少。至今所做的项目中,第四项还没涉及过。如果有人用过,可以拿出来分享一下。
一个demo:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=480" />
<head>
<style>
#stage{
width:480px;
height:360px;
overflow:hidden;
background-color: black;
}
#bg {
position:relative;
width:480px;
height:360px;
overflow:hidden;
background-color: red;
} #phone {
position:absolute;
left:0px;
top:0px;
}
</style>
<title>360°旋转</title>
</head>
<body style="overflow:hidden;padding:0; margin:0;">
<div id="stage">
<div id="bg">
<img id="phone" src="data:images/360pic1.jpg" />
</div>
</div>
<span id="toleft">往左转</span>
<span id="toright">往右转</span> <script type="text/javascript">
var c_i = 1;
var c1=new Array();
//创建数组,i的数量是图片的总数;进行for循环。
for(var i=1;i<=72;i++){
c1[i]=new Image();
c1[i].src="data:images/360pic"+i+".jpg";
} //定义要360度旋转的对象
var main_swipe = document.getElementById_x("phone"); //创建滑动的基本距离和滑动方法属性。
var defaults = {
threshold: {
x: 10,
y: 30
},
swipeLeft: function() {showPicLeft();},
swipeRight: function() {showPicRight();},
};
//定义初始坐标
var originalCoord = { x: 0, y: 0 };
var shiftCoord = { x: 0, y: 0 };
var finalCoord = { x: 0, y: 0 }; main_swipe.addEventListener("touchstart",function(event) { //定义滑动初始时的坐标
originalCoord.x = event.targetTouches[0].pageX;
originalCoord.y = event.targetTouches[0].pageY;
shiftCoord.x = event.targetTouches[0].pageX;
shiftCoord.y = event.targetTouches[0].pageY;
finalCoord.x = originalCoord.x;
finalCoord.y = originalCoord.y; }, false); main_swipe.addEventListener("touchmove",function(event) { //定义滑动中的坐标
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX;
finalCoord.y = event.targetTouches[0].pageY; //当横向滑动距离大于5时,则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
if(finalCoord.x - shiftCoord.x > 5){
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
shiftCoord.x = finalCoord.x; }else if(finalCoord.x - shiftCoord.x < -5){ window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
shiftCoord.x = finalCoord.x; }
}, false); main_swipe.addEventListener("touchend",function(event) { var changeY = originalCoord.y - finalCoord.y; //滑动结束时,进行坐标判断。并执行向左或是向右的方法
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { changeX = originalCoord.x - finalCoord.x; if(changeX > defaults.threshold.x) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
} if(changeX < (defaults.threshold.x*-1)) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
}
}
}
, false); //向左滑动方法
var showPicLeft = function(){
c_i--;
if(c_i < 0){
c_i = 72;
};
document.getElementById_x("phone").src = c1[c_i].src;
} //向右滑动方法
var showPicRight = function(){
c_i++;
if(c_i > 72){
c_i = 1;
};
document.getElementById_x("phone").src = c1[c_i].src;
} var zidongleft;
var zidongright;
var panduanleft=false;
var panduanright=false; //添加向左自动滑动功能
document.getElementById_x("toleft").addEventListener("touchstart",function(event){
window.clearInterval(zidongright);
if(panduanleft==false){
zidongleft=setInterval(function(){defaults.swipeLeft()},50);
}
panduanleft=true;
panduanright=false;
},false); //添加向右自动滑动功能
document.getElementById_x("toright").addEventListener("touchstart",function(event){
window.clearInterval(zidongleft);
if(panduanright==false){
zidongright=setInterval(function(){defaults.swipeRight()},50);
}
panduanright=true;
panduanleft=false;
},false); </script>
</body>
</html>
代码中,定义了一个元素main_swipe,这个元素就是要进行手势操作的对象。
main_swipe.addEventListener("touchstart",function(event) { //定义滑动初始时的坐标
originalCoord.x = event.targetTouches[0].pageX;
originalCoord.y = event.targetTouches[0].pageY;
shiftCoord.x = event.targetTouches[0].pageX;
shiftCoord.y = event.targetTouches[0].pageY;
finalCoord.x = originalCoord.x;
finalCoord.y = originalCoord.y; }, false);
[/run]我们为这个对象添加监听事件,touchstart就是表示当手指刚放到屏幕上就触发,通过event对象我们可以获取当前触摸点的坐标。
即event.targetTouches[0].pageX; event.targetTouches[0].pageY;
其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。
通过event.targetTouches[0].pageX; event.targetTouches[0].pageY;
这样,我们就可以获取到当前触摸点的X和Y坐标。 接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。1
main_swipe.addEventListener("touchmove",function(event) { //定义滑动中的坐标
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX;
finalCoord.y = event.targetTouches[0].pageY; //当横向滑动距离大于5时,则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
if(finalCoord.x - shiftCoord.x > 5){
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
shiftCoord.x = finalCoord.x; }else if(finalCoord.x - shiftCoord.x < -5){ window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
shiftCoord.x = finalCoord.x; }
}, false);
注意,在获取触摸移动中的坐标的时候,一定要先把浏览器的默认行为禁止 event.preventDefault();
触摸移动中的获取的坐标方法同触摸开始的方法是一样的。这里就不在继续阐述。
通过条件判断,当touchmove时的X坐标大于touchstart时的X坐标,则证明用户向右滑动,反之则向左滑动。
通过这个判断来执行defaults.swipeRight();或是defaults.swipeLeft();。从而实现360°旋转的功能。
当手指离开屏幕时,即touchend。同样要获取离开的坐标,以便为下一次touchstart来进行坐标定义。
main_swipe.addEventListener("touchend",function(event) {
var changeY = originalCoord.y - finalCoord.y; //滑动结束时,进行坐标判断。并执行向左或是向右的方法
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { changeX = originalCoord.x - finalCoord.x; if(changeX > defaults.threshold.x) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
} if(changeX < (defaults.threshold.x*-1)) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
}
}
}
, false);
以上的效果,就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途
移动前端javascript事件的更多相关文章
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- Javascript事件模型系列(一)事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- JavaScript:JavaScript事件的处理
JavaScript事件处理 —————事件的处理流程: —————动态事件绑定: —————常用的事件处理. 1.事件的概念 在页面之中,会针对用户的每一个操作进行记录.在页面中的事件可以简单的理解 ...
- 谈谈JavaScript事件
众所周知,web前端包含三个基本技术:html.css和javascript.三者融合,才让网页变得精彩纷呈!如今,web上的操作越来越趋于复杂,JavaScript事件在网页中也遍地开花,有时候也是 ...
- javascript事件委托机制详解
以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
随机推荐
- javascript优化工具 Doloto
Doloto是“Download Time Optimizer”的简写.官方页面上说它对于大型复杂的AJAX应用尤其的有用,因为这些应用包含了大量的 JavaScript 代码.简单的说,它的工作原理 ...
- Spring MVC中基于注解的 Controller
终于来到了基于注解的 Spring MVC 了.之前我们所讲到的 handler,需要根据 url 并通过 HandlerMapping 来映射出相应的 handler 并调用相应的方法以响 ...
- gVim多标签页
我们一般使用的文本编辑器,如:editplus.ultraEdit等都是支持多标签页的,可以同时打开多个文件,方便切换,以前gVim只能打开多个窗口,或者一个窗口切出多个窗口来编辑,自从7.0以后Vi ...
- Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
- bootstrap 的 datetimepicker 结束时间大于开始时间
web的时间js控件,在管理性的项目中频繁用到,总结了一些用到的知识,分享出来,供以后学习: 1.首先引用资源包: bootstrap基础资源包: bootstrap.min.css .bootstr ...
- GridView中的超级链接技巧
GridView中的超级链接,可以设置一个模版列,放入超级链接的控件,设置绑定参数即可. 数据绑定方式有两种,如下示例: Eval方式 <%# Eval("id") %> ...
- ###Linux基础 - 3
点击查看Evernote原文. #@author: gr #@date: 2014-10-15 #@email: forgerui@gmail.com 一.GCC编译程序 在Windows下使用Vis ...
- net下 Mysql Linq的使用, 更新数据,增加数据,删除数据
net下访问mysql主要有2种方法: 1.字符串拼接访问 a.mysql官网下载并安装mysql-connector-net. b项目中引用mysql.data等 所有增删改查可以通过拼接sql语句 ...
- WPF 关于XDocument(xml) 的部分操作记录
(1)删除xml文件中的一个结点的方法,有如下两种方式(只有存在数据绑定的情况下才会有第二种情况,否则一般是第一种情况): private void DeletePacsNode() { //从xml ...
- android xml产生和解析
public static void writeToXml(Map<String, Object> map,Writer writer) throws Exception, Illegal ...