click和点击事件

1:click和点击事件

对于a标记的点击导航,默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。

在移动浏览器中对触摸事件的响应顺序应当是:
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此,如果确实要加快对点击事件的响应,就应当绑定ontouchend事件。
使用click会出现绑定点击区域闪一下的情况,解决:给该元素一个样式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);
如果不使用click,也不能简单的用touchstart或touchend替代,需要用touchstart的模拟一个click事件,并且不能发生touchmove事件,或者用zepto中的tap(轻击)事件。

body
{
    -webkit-overflow-scrolling: touch;
}

用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧?不过如果是一个div,然后设置 height:200px;overflow:auto;
的话,可以滚动但是完全没有那滑动效果,很郁闷吧?
我看到很多网站为了实现这一效果,用了第三方类库,最常用的是iscroll(包括新浪手机页,百度等) 我一开始也使用,不过自从用了-webkit-overflow-scrolling: touch;
样式后,就完全可以抛弃第三方类库了,把它加在body{}区域,所有的overflow需要滚动的都可以生效了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 相关知识点 移动端、 适配(兼容)、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决...
    sandisen阅读 25,779评论 3 67
  • META相关 1. 添加到主屏后的标题(IOS) 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕...
    老夫的天阅读 8,196评论 3 21
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    安石0阅读 6,086评论 0 5
  • 这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。 META相关 1. 添加到主屏...
    泡芙小姐110阅读 3,998评论 3 17
  • 在面试中如何与HR谈工资,是一个很敏感的问题,有时候觉得不谈吧又不甘心,谈吧但又不知道怎么开口怕被拒绝饿,所以谈工...
    底细L阅读 3,558评论 0 0

友情链接更多精彩内容