目录 触摸事件概述 触摸事件编码 触摸手指个数分析 触摸目标 DOM 元素分析 触摸位置分析 ---- 触摸事件概述 1、HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸...2、移动端浏览器触摸事件： 事件名称 描述 是否包含 touches 数组 touchstart 触摸开始，多点触控，后面的手指同样会触发 是 touchmove 接触点改变，滑动时 是 touchend... $(function () { //手指触摸屏幕时触发事件 $(...3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的 事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。 <!...target).attr("class"));//JQuery 获取触摸对象的class属性值 } /** * 手指在触摸屏上移动时——函数调用
但是这里的拖放和iphone上的触摸(touch)滑动还不完全一样，这里的拖放可能是用鼠标操作，但是触摸滑动主要是通过手指之类的。...没有具体开发过mobile web应用，不知道jQuery UI的draggable和droppable是否支持手机上的触摸操作。...Web拖放发展历史 第一阶段： 因为HTML和DOM可以处理底层的鼠标事件，所以早起的开发人员可以借助Javascript和CSS，DOM事件基础，可以近似实现一个简单的拖放功能。...mousemove 如果鼠标没有松开，则是移动操作 需要判定拖动还是选择?...mouseover 鼠标移动到了每个元素上 放置在哪个元素上面 mouseout 鼠标移除了某个元素，此元素不再是 可放置的元素 需要为用户给出提示吗?
因此，我们代码将使得事件处理程序在现代浏览器和IE8种可工作 作为一方面的说明。这是一种使用一个强大JavaScript库的原因，比方jQuery。...此外，很多jQuery命令都比核心JavaScript更加直观、简单。...当我在舞台区域移动鼠标时。我想要全部的机器人朝着鼠标移动的方向跑。当它们抵达鼠标或者鼠标正好在它们上面，我想要它们停止移动。假如鼠标放在它们身上，我想要它们跳起来。...相似地，当用户在robot元素上移动鼠标。...由于触摸屏表现得有些不同，我们须要在事件侦听器上做一些额外的编码。 支持触摸屏 我们须要为触摸屏制定一些新规则：在stage上。
2：Hammer.js:http://hammerjs.github.io/ Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。...3：QuoJS: QuoJS不仅是一个触摸事件管理器，还是一个功能丰富的类库，无需第三方JavaScript库（例如 jQuery, Prototype, Kendo ...）来创建基于浏览器应用程序的复杂项目...是轻量级模块化、面向对象的JavaScript库，定义了多种触摸手势，可以用于移动Web开发中简化HTML文件遍历、事件处理及Ajax交互等，让开发者轻松编写出高效的跨浏览器代码。...支持精确的触摸移动操作，而且还可以设置自动播放、等比例缩放等等实用性的功能。支持触摸移动，支持响应式页面。最近的一个项目中使用到了swipe.js这个插件 感觉非常的好用的，五颗星好评。...jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。
什么是事件: 系统给提供的一些特定时间点, 事件包括:鼠标事件,键盘事件,状态改变事件 鼠标事件: onclick 鼠标点击事件 onmouseover 鼠标移入事件 onmouseout...鼠标移出事件 onmousedown 鼠标按下事件 onmouseup 鼠标抬起事件 onmousemove 鼠标移动事件 键盘事件 onkeydown 键盘按下事件 onkeyup 键盘抬起事件...movefn(){ console.log("鼠标移动"); } function overfn(){ //快捷写法 clog console.log("鼠标移入"); }.../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"> <script type="text/<em>javascript</em>
jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner...，冒泡鼠标滚轮事件（默认：true） railoffset，您可以添加抵消顶部/左边的轨道位置（默认：false） bouncescroll，使滚动弹跳在内容结尾作为移动像（仅HW ACCELL）（...railalign，取向垂直导轨（defaul：“右”） railvalign，对齐水平导轨（defaul：“底部”） enabletranslate3d，nicescroll可以使用CSS转换为滚动内容...（默认：true） enablemousewheel，nicescroll可以管理的鼠标滚轮事件（默认：true） enablekeyboard，nicescroll可以管理键盘事件（默认：true...） smoothscroll，滚动自如移动（默认：true） sensitiverail，点击轨道上进行滚动（默认：true） enablemouselockapi，可以用鼠标说明锁的API（对象拖动同样的问题
一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) （1）手指触摸开始时记录手指所在的坐标X （2）获取界面上的轮播图容器 var $carousels=$('.carousel')...next':'prev'); javascript代码 1 //移动端轮播图滑动 2 3 //1、先获取手指在轮播图元素上的滑动方向(左右) 4 //手指触摸开始时记录手指所在的坐标...next':'prev'); 40 41 42 43 } 二、移动端获取触摸点的方式说明 1.touchstart事件 手指头触摸屏幕上的事件 2.touchmove... 手指头在屏幕上滑动触发的事件 3.touchend 当手指从屏幕上离开的时候触发 利用jquery配合使用方法如下： $("#demoid").bind('touchstart...touchstart、touchmove、touchend三种事件下的鼠标位置点获取： （1）touchstart事件下获取：e.originalEvent.targetTouches[0].pageX
37、Jquery与jQuery UI 有啥区别？ *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。...提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等 38、jquery 中如何将数组转化为json字符串，然后再转化回来？..., 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?...闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环） 43、JQuery一个对象可以同时绑定多个事件，这是如何实现的？...对于'filename'和'.hiddenfile'，lastIndexOf的返回值分别为0和-1无符号右移操作符(»>) 将-1转换为4294967295，将-2转换为4294967294，这个方法可以保证边缘情况时文件名不变
本文为Varlet组件库源码主题阅读系列第八篇，读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。...false : initiated // 如果是鼠标移动事件且鼠标没有按下则返回 if (isMousemove(type) && !...这个方法首先根据鼠标事件的类型设置了initiated变量，记录鼠标的按下状态，如果是鼠标移动事件且鼠标没有按下，那么个方法会直接返回，因为touch事件都需要先按下才会触发，然后调用了isUpdateTarget...：当前屏幕上所有触摸点的列表 targetTouches：当前对象上所有触摸点的列表 changedTouches：涉及当前(引发)事件的触摸点的列表 移动端触摸点是可能存在多个的，比如我同时好几个手指一起触摸...但是在桌面端，鼠标触摸点显然只有一个，所以这三个列表其实都是相同的。
Canvas 的绘图原理是通过 JavaScript 操作 Canvas 上下文对象（Context）来实现的。Canvas 上下文对象提供了各种方法和属性，用于绘制图形、设置样式、处理事件等。...我的思路是，签名版是一个可以在上面绘制签名的区域，我们可以通过鼠标或触摸屏幕来绘制签名。 而在 Canvas 上绘制签名版的关键是监听鼠标或触摸事件，并根据事件的坐标绘制签名。...监听鼠标mousedown事件 我们写一个监听鼠标的 mousedown 事件。当鼠标按下时，会将 drawing 变量设置为 true，表示开始绘制。...这样就可以将画笔移动到鼠标点击的位置了。...监听鼠标 mousemove 事件 当然，我们也需要监听鼠标的 mousemove 事件。当鼠标移动时，如果 drawing 变量的值为 false，则表示当前没有在绘制，直接返回。
移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...2.1 touch事件与click事件同时触发 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...()来阻止鼠标事件被触发。...touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。...Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库， 它适配了jQuery的大部分api，也就是jQuery怎么用，Zepto.js就怎么用。
移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...2.1 touch事件与click事件同时触发 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。...()来阻止鼠标事件被触发。...touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离 touchmove 事件的触发频率是不同的。...5.3 zepto的手势相关事件 Zepto.js 是一个轻量级的针对现代高级浏览器的JavaScript库， 它适配了jQuery的大部分api，也就是jQuery怎么用，Zepto.js就怎么用。
jQuery基础教程之事件监听操作 一、事件监听方法 1.执行事件 $("p").click(); 2.监听事件 $("p").click(function(){...}); 3.on 绑定事件 $("p").on("click", function(){ alert( "haha" ); }); //可以对后追加的数据生效...事件类型 鼠标事件 click 点击 dblclick 双击 mouseenter 鼠标进入 mouseleave 鼠标离开 touch 触摸事件 touchstart 触摸开始 touchmove...移动 touchend 触摸结束 键盘事件 keydown 键盘按下 keyup 键盘放开 表单事件 submit 表单提交 change 内容改变 focusin 当元素获得焦点时.../jquery.min.js"> $(".list").on("click",".item",function(e){
它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。...由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。...=['#f00','#0f0','#00f']}) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...= 'none'; 转自http://home.cnblogs.com/group/topic/345.html 仅供学习记录
jquery mobile 针对移动端设备的事件类型。 1.touch 事件。 tap 快速触摸屏幕并且离开，类似一种完整的点击操作。 ...taphold 触摸屏幕并保持一段时间。 swipe 在1秒内水平移动30px屏幕像素上时触发。 ... vmouseover 统一处理触摸和鼠标悬停事件。 ...vmousedown 统一处理触摸和鼠标按下事件。 vmousemove 统一处理触摸和鼠标移动事件。 ...vmouseup 统一处理触摸和鼠标按键松开事件。 vclick 统一处理触摸和鼠标点击事件。
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 1. Why Zepto.js？...Zepto增加了针对移动端的触摸和手势相关的事件 Zepto模块化做的很灵活，可以自定义组合模块 2....touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。...gesture 在触摸设备上触发 pinch 手势事件。...总结 zepto.js确实非常小巧，而且非常讨巧的利用了大家熟悉jQuery的优势，确实非常可爱的一个js库，设计的模块中庸而又实用，在移动端的触屏事件封装的很不错，移动端web开发值得推荐。
JavaScript进阶内容——jQuery 我们在前面的文章中已经掌握了JavaScript的全部内容，现在让我们了解一下JavaScript库 这篇文章主要是为了为大家大致讲解JavaScript...jQuery并没有封装，所以如果想使用这些属性和方法就需要把jQuer对象转换为DOM对象才能使用 代码展示： <!.../index.html jQuery事件 jQuery的鼠标事件和键盘事件与JavaScript原生代码事件完全相同： 鼠标事件 触发条件 click 鼠标点击左键触发 mouseover 鼠标经过触发...mouseout 鼠标离开触发 focus 获得鼠标焦点触发 blur 失去鼠标焦点触发 mousemove 鼠标移动触发 mouseup 鼠标弹起触发 mousedown 鼠标按下触发 键盘事件...-- 我们希望在盒子里移动鼠标时，上面显示鼠标位置 --> div { height: 400px; width:
HTML5移动端开发的常用触摸事件 h5开发手机端是经常会有触摸事件和滑动事件 HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略...因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。 ...在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。...所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX...(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标
指针事件 目前有两种广泛使用的方式，用于指向屏幕上的东西：鼠标（包括类似鼠标的设备，如触摸板和轨迹球）和触摸屏。 它们产生不同类型的事件。 鼠标点击 点击鼠标按键会触发一系列事件。"...每次鼠标移动时都会触发"mousemove"事件。...触摸事件 我们使用的图形浏览器的风格，是考虑到鼠标界面的情况下而设计的，那个时候触摸屏非常罕见。 为了使网络在早期的触摸屏手机上“工作”，在某种程度上，这些设备的浏览器假装触摸事件是鼠标事件。...当手指开始触摸屏幕时，您会看到'touchstart'事件。 当它在触摸中移动时，触发"touchmove"事件。 最后，当它停止触摸屏幕时，您会看到"touchend"事件。...按下鼠标按钮时，会触发mousedown、mouseup和click事件。移动鼠标会触发mousemove事件。
事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁 4 jQuery事件对象的作用 li都有一个共同的父元素，而且所有的事件都是一致的...，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 7 event.preventDefault()阻止默认行为，在执行这个方法后...()阻止事件冒泡，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数 9 event.which获取在鼠标单击时，单击的是鼠标的哪个键 10 event.which...DOM元素 13 .this和event.target都是dom对象，使用jquey中的方法可以将他们转换为jquery对象，比如this和$(this)的使用、event.target和...$(event.target)的使用 转帖：http://blog.51cto.com/lakaodekaola/2085868
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
