touch事件与click事件

来源:互联网 发布:阿里巴巴查排名软件 编辑:程序博客网 时间:2024/04/29 17:54

1.平时写点击事件几乎都是使用click,最近看很多移动端都是使用touch,就总结了一下它们的区别

1).对于传统的click事件、mouseover事件在android、ios上都是支持的,但是click事件在iOS上会有半秒左右的延时(因为连续双击是放大的效果,需判断是否是连续双击),相比之下touch事件就有响应快、流畅等优点,touch事件也因此被越来越多的移动端开发者使用,下面的实例会先弹出 456 在弹出123,如果要阻止click弹出可以使用e.preventDefault();

2).click触发:手指触摸屏幕且未在屏幕上移动,如果移动是不会触发的

3).touchstar触发:手指接触屏幕立即触发,虽然相应快,但有时这也不一定使我们想要的结果,也就是说touchstart也不能完全取代click,要适时而用

4).可以通过时间戳获取,touchstart与touchend之间也有300ms左右的间隔

5).touchmove,手指在屏幕上移动触发

6).click事件既支持触屏也支持鼠标点击,而touch则不支持鼠标点击

<div id="con" style="width:100px;height:100px;border:1px solid blue;"></div>
<script>
$('#con').click(function(){
alert('123');
})
$('#con').on('touchstart',function(){
alert('456');
})

$('#con').on('touchmove',function(){
alert('456');
})

$('body').on('touchend','.del',function(event){
        event.preventDefault();//阻止默认事件

}//项目中的使用
</script>

在此也记录一下工作中遇到的一个问题:

当时使用到了一个滑动的时间插件,我想在点击确定的时候执去行另一个事件,这时的确定按钮算是通过append追加上去的,而且是写在插件中的,按理说通过append追加的未来元素,是可以通过live()或则on()去绑定这个事件的,当时在PC端常用浏览器都可以实现,但是在手机上,不论iOS还是Android都是不可以,于是当时就用到了touch事件,这时又出现一个问题,touch事件响应太快,我本是想把选中的时间(是一个select下的option)放到另一个input中显示,但它显示的总是前一个选中的元素,于是又用到了setTimeout()设置200mm的定时才解决了这个问题

刚入门,如有错误,还望指正


0 0
原创粉丝点击