JS—触摸事件、手势事件

触屏已经是我们身边电子设备的常态了。触摸事件当然也是随着触屏的出现,用户使用最多的事件啦!
难道使用触屏事件后,其他原来的鼠标事件就都不能用啦?当然不是,只不过不是那么好用啊。


针对鼠标事件,有哪些不适应?

  • dbclick
    触屏设备不支持双击事件。双击浏览器窗口,会放大画面。
    可以通过在head标签内加上这么一行:
    <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    可以实现,我们编写的页面不会随着用的手势而放大缩小。
    关于meta标签,我还没有研究过,罪过啊。
  • mouse
    在触屏上,我们单击一个元素,会相应的触发:mousemove mousedown mouseup click,所以当我们编写移动客户端界面时,可以为元素直接添加move事件,可以提高效率。
    同时也会触发mouseovermouseout,测试结果,我发现,只有当页面第一次刷新时,单击元素,参会触发mouseover事件。

随着触屏移动端设备的普及使用,W3C开始制定TouchEvent规范。

  • 触摸事件
    该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。具体来说有以下几个触摸事件。
    • touchstart
      当手指放在屏幕上触发。
    • touchmove
      当手指在屏幕上滑动时,连续地触发。
    • touchend
      当手指从屏幕上离开时触发。
    • touchcancel
      当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。
      【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。
      由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault(),来阻止屏幕的默认滚动。
  • 除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
  • touches:表示当前跟踪的触摸操作的touch对象的数组。
    当一个手指在触屏上时,event.touches.length=1,
    当两个手指在触屏上时,event.touches.length=2,以此类推。
  • targetTouches:特定于事件目标的touch对象数组。
    因为touch事件是会冒泡的,所以利用这个属性指出目标对象。
  • changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。
    每个touch对象都包含下列几个属性:
  • clientX:触摸目标在视口中的x坐标。
    clientY:触摸目标在视口中的y坐标。
    identifier:标识触摸的唯一ID。
    pageX:触摸目标在页面中的x坐标。
    pageY:触摸目标在页面中的y坐标。
    screenX:触摸目标在屏幕中的x坐标。
    screenY:触摸目标在屏幕中的y坐标。
    target:触摸的DOM节点目标。
    【如何使用呢?】
    EventUtil.addHandler(div,"touchstart",function(event){
    div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;
    });
    EventUtil.addHandler(div,"touchmove",function(event){
    event.preventDefault();
    div.innerHTML=event.touches[0].clientX;
    });
    EventUtil.addHandler(div,"touchend",function(event){
    div.innerHTML=event.changedTouches[0].clientY;
    });
    使用clientX……时,必须要指明具体的touch对象,而不要直接指明数组。
    event.touches[0]
    touchend事件处理函数中,当该事件发生时,touches里面已经没有任何的touch对象了,此时,就要使用changeTouches集合。

  • 手势事件
  • gesturestart:当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发。
  • gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
  • gestureend:当任何一个手指从屏幕上面移开时触发。
    【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。
  • 触摸事件与手势事件之间的关系
    1、当一个手指放在屏幕上时,会触发touchstart事件,如果另一个手指又放在了屏幕上,则会触发gesturestart事件,随后触发基于该手指的touchstart事件。
    2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件,但只要有一个手指移开,则会触发gestureend事件,紧接着又会触发toucheend事件。
  • 手势的专有属性
  • rotation:表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从零开始。
  • scale:表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。

不知道为什么?我编写的手势事件,无法在安卓机的浏览器内使用。
没有果机,没试过,以后再研究吧,今天就写到这。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容