重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
触屏已经是我们身边电子设备的常态了。触摸事件当然也是随着触屏的出现,用户使用最多的事件啦!
难道使用触屏事件后,其他原来的鼠标事件就都不能用啦?当然不是,只不过不是那么好用啊。
10多年的江夏网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整江夏建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“江夏网站设计”,“江夏网站推广”以来,每个客户项目都认真落实执行。
针对鼠标事件,有哪些不适应?
dbclick
触屏设备不支持双击事件。双击浏览器窗口,会放大画面。
可以通过在head标签内加上这么一行:
可以实现,我们编写的页面不会随着用的手势而放大缩小。
关于meta
标签,我还没有研究过,罪过啊。
mouse
在触屏上,我们单击一个元素,会相应的触发:mousemove
mousedown
mouseup
click
,所以当我们编写移动客户端界面时,可以为元素直接添加move事件,可以提高效率。
同时也会触发mouseover
与mouseout
,测试结果,我发现,只有当页面第一次刷新时,单击元素,参会触发mouseover事件。
随着触屏移动端设备的普及使用,W3C开始制定TouchEvent规范。
触摸事件
该类事件会在用户手指放在屏幕上面时,在屏幕上滑动时,或从屏幕上移开时触发。具体来说有以下几个触摸事件。
1、touchstart
当手指放在屏幕上触发。
2、touchmove
当手指在屏幕上滑动时,连续地触发。
3、touchend
当手指从屏幕上离开时触发。
4、touchcancel
当系统停止跟踪时触发,系统什么时候取消,文档没有明确的说明。
【总】以上四个,是w3c提供的触摸事件,只针对触摸设备,最常用的是前三个。
由于触摸会导致屏幕动来动去,所以可以会在这些事件的事件处理函数内使用event.preventDefault()
,来阻止屏幕的默认滚动。
除了常用的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
1、touches:表示当前跟踪的触摸操作的touch对象的数组。
当一个手指在触屏上时,event.touches.length=1,
当两个手指在触屏上时,event.touches.length=2,以此类推。
2、targetTouches:特定于事件目标的touch对象数组。
因为touch事件是会冒泡的,所以利用这个属性指出目标对象。
3、changedTouches:表示自上次触摸以来发生了什么改变的touch对象的数组。
每个touch对象都包含下列几个属性:
4、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集合。
手势事件
【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。
触摸事件与手势事件之间的关系
1、当一个手指放在屏幕上时,会触发touchstart
事件,如果另一个手指又放在了屏幕上,则会触发gesturestart
事件,随后触发基于该手指的touchstart
事件。
2、如果一个或两个手指在屏幕上滑动,将会触发gesturechange
事件,但只要有一个手指移开,则会触发gestureend
事件,紧接着又会触发toucheend
事件。
手势的专有属性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。