OnMouseDown 等鼠标事件Android Webview 的事件处理

在Android Webview中,mousedown事件处理存在异常,仅在touchend前50毫秒触发。通过使用touchstart对应mousedown,touchend对应mouseup来解决这个问题。在移动互联网开发中,尤其是Android设备,理解并利用touchstart、touchend和touchmove事件至关重要,它们提供了页面坐标和时间戳等信息,可用于实现如滑动切换tab等功能。可以访问http://lab.allenm.me/touch.html进行测试。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 项目需求要实现一个长按的功能,但是Ui是HTML5的,不知道为啥mouseDown事件在Android的Webview里面处理的十分诡异,只有up前50毫秒才会被触发……没意义啊我擦!!!


搞了两天终于搞定了,我在webview中调用了javascript,相应的touchstart 对应mousedown    touchend 对应mouseup


注意:如果mousedown无法正确执行,需要

e.preventDefault()

切记


感谢以下文章,特此转载!!!!!!!


转自:http://blog.allenm.me/2010/06/touchstart-touchend-touchmove-%E4%B8%8E%E7%A7%BB%E5%8A%A8%E4%BA%92%E8%81%94%E7%BD%91%E5%BC%80%E5%8F%91/

touchstart, touchend, touchmove 与移动互联网开发
发表于 2010 年 06 月 01 日 由 allenm 

你为移动互联网准备好了吗?

大家都可以感受到iPhone,Android,iPad带来了移动互联网革命,前端程序员们,大家准备好了吗?移动互联网早已不是那个WAP的时代,WAP基本被淘汰了,新一代的智能移动终端,都具有了标准的HTML,CSS,JS的解析能力,但是又和桌面不同,比如这样的终端是没有光标的,也就是我们平时经常用到的 mouseover这些光标相关的东西,在这些终端上是没有作用的。同时,这些终端又具有一些他们自己的特色,比如 touch 事件,因为操作全是 touch ,所以这个事件如果好好利用,在移动互联网开发中会发挥大用处的。

正好现在手里有个 Android 设备,做毕设用的,现在也想为毕设搞点新鲜内容,所以就做了对 Android 浏览器的 touch 事件的测试。说了这么多,是因为这个东西很简单,不说点废话撑下门面,那这个博文就太短了。

touth相关的事件有 touchstart,touchend,touchmove。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。

其中 touchstart 在开始触摸的时间激发, touchend 在触摸结束的时间激发, touchmove 这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 1.5 中,在 touchstart 激发后激发一次,然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性,查看 timeStamp 属性,可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend,但是在我这里测试实际看到的确是上一段中提到的那样。

现在 Android 官方也没有一个好的关于 WEB APP 的文档,不过有了 touchstart, touchend 这两个事件的 pageX,pageY,timeStamp 属性已经可以开发出好玩的东西了。比如我想让用户通过划屏幕,来做 tab 切换。

关于 touch 事件的测试,你可以用你的 iPhone,Android,iPad访问 http://lab.allenm.me/touch.html,然后触摸屏幕,看结果。注意由于为了完整展示效果,所以对屏幕宽度有要求,最好横批浏览。同时,预告一下,我以后会用 allenm.me 这个域名,等有空了做迁移。

另外附上apple 官方关于这个事件的文档.有兴趣的可以去看看,iPhone 可是支持多点触摸的,在这个文档里,我们也可以看到处理多点触摸的方法。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值