6

使用HTML5构建iOS原生APP(3)

 3 years ago
source link: https://yuguo.us/weblog/click-and-touch/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使用HTML5构建iOS原生APP(3)

余果 2013-03-15 iOS

问题发生的场景是webview中有一些筛选器,当我点击(在手机上实际上是触摸)筛选器的时候,页面内容会发生变化,但完全是本地的,不涉及数据传输之类的。

这次要解决的体验问题是当点击事件发生的时候,页面会闪烁一下

研究之后发现解决办法是把对click事件的绑定替换成touchend

tagdom.addEventListener('click',function(ev){
	...
}
tagdom.addEventListener('touchend',function(ev){
	...
}

代码很简单,但是新的问题出现了,当我按住选择器,然后我突然不想点了,我就会滑走手指,然后放开。我的预期当然是事件被取消,但是touchend还是执行了,并且ev.target仍然是之前的元素。

所以我需要检测是否发生了touchmove事件,解决办法应运而生:

var isScrolling = false;
window.addEventListener('touchstart', function () { isScrolling = false; });
window.addEventListener('touchmove', function () { isScrolling = true; })

所以我们现在有一个变量isScrolling来标志是否滑动了手指,如果没有发生过滑动,那么touchend才生效:

tagdom.addEventListener('touchend',function(ev){
	if(isScrolling == false){
		...
	}
}

现在,页面不会再发生闪烁了。

我写字的地方迁移到公众号啦~欢迎关注我的公众号:余果专栏

user

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK