touchstart,touchmove,touchend事件 写法

jQuery写法:
 1 $(‘#id‘).on(‘touchstart‘,function(e) {
 2     var _touch = e.originalEvent.targetTouches[0];
 3     var _x= _touch.pageX;
 4 });
 5
 6 $(‘#id‘).on(‘touchmove‘,function(e) {
 7     var _touch = e.originalEvent.targetTouches[0];
 8     var _x= _touch.pageX;
 9 });
10
11 $(‘#id‘).on(‘touchend‘,function(e) {
12     var _touch = e.originalEvent.changedTouches[0];
13     var _x= _touch.pageX;
14 }
原生写法:
 1 document.getElementById("id").addEventListener("touchstart",function(e)
 2 {
 3     var _x=e.touches[0].pageX;
 4     var _y=e.touches[0].pageY;
 5     console.log("start",_x)
 6 })
 7 document.getElementById("id").addEventListener("touchmove",function(e)
 8 {
 9     var _x=e.touches[0].pageX;
10     var _y=e.touches[0].pageY;
11     console.log("move",_x)
12 })
13 document.getElementById("id").addEventListener("touchend",function(e)
14 {
15     var _x=e.changedTouches[0].pageX;
16     var _y=e.changedTouches[0].pageY;
17     console.log("end",_x)
18 })
时间: 2024-10-12 20:38:11

touchstart,touchmove,touchend事件 写法的相关文章

手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果

在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id){ setTimeout(function(){ var obj=document.getElementById(id); touchPublic.tagUltagDiv(obj); },300); }; var touchPublic={ tagUltagDiv:function(obj){ va

touchstart和touchend事件

touchstart和touchend事件 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 由于公司的需要,最近也在开发移动web,对于一个没有移动开发经验的人来说,其实也是比较困恼的一件事情.对于移动web开发目前主要是基于webkit内核的浏览器.在webkit内核的环境下开发,你可以充分的运用html5+css3,还有它的一些私有属性.这让我很兴奋.可是,毕竟,对于一个长期习惯pc端做固定像素开

获取touchstart,touchmove,touchend 坐标

简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.t

jQuery的touchstart,touchmove,touchend的获取位置

$('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; var y = touch.pageY; }); $('#webchat_scroller').on('touchmove',function(e) { var touch = e.originalEvent.targetTouches[0]; var y = touch.pageY; }); $('

JQuery 获取touchstart,touchmove,touchend 坐标

JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touc

解决移动端touch事件(touchstart/touchend) 的穿透问题

情景: 我们在移动端点击事件click对比touchend会有很明显的300ms的延迟,为啥? 浏览器在 click 后会等待约300ms去判断用户是否有双击行为(手机需要知道你是不是想双击放大网页内容). 如果300ms内没有再一次click,那么就判定这是一次单机行为.所以我们基本上都用(touchstart/touchend). 但是这些事件在执行完之后还会执行一次click事件(具体原因解释起来太麻烦了,这要从JS事件监听机制的根本的讲起...其实我也了解有限..) 解决: 解决方案一:

安卓手机的touchend事件不触发问题

问题描述 $(document).on("touchstart touchmove",".btn-highlight",function(event){ $(this).addClass("hover"); }).on("touchend touchcancel",".btn-highlight",function(event){ $(this).removeClass("hover")

移动端 touchmove高频事件与requestAnimationFrame的结合优化

移动端最高频耗内存的的操作  莫属 touchmove 与scroll事件  两者需要 微观的 优化: 这里 我们 讲述 touchmove:touchmove 事件发生很频繁,会比屏幕刷新率快,导致无效的渲染和重绘: 帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≍ 16.6ms(1毫秒的优化意味着 6%的性能提升) 浏览器对每一帧画面的渲染工作需要在16毫秒(1秒 / 60 = 16.66毫秒)之内完成 :如果超过了这个时间限度,页面的渲染就会出现卡顿效果,也就

移动端多点触摸touchend 事件没有正常触发

移动端触屏事件主要是touchstart,touchmove,touchend 执行顺序touchstart(开始) - touchmove(移动) - touchend(结束) for (var i = 0; i < dom.length; i++) { dom[i].addEventListener('touchstart', function (e) { ..... }, false); dom[i].addEventListener('touchend', function (e) {