如何阻止橡皮筋效果

摘要

对于刚刚踏入前端这个行业的朋友们来说,多数人都会有这样一个先入为主的看法——移动端开发比PC端开发简单。但是,随着时间的推移、工作阅历的增加、工作经验的积累,笔者相信很多人会慢慢开始否定最初的这种看法。

笔者猜测多数人有上述看法的原因归根到底在于PC端的兼容性问题。其中最让前端人员“愤青”的当属微软自家的产品——IE系列浏览器。笔者估计:IE6曾经是不少前端开发人员的“眼中钉,肉中刺”。

对于刚刚踏入前端这个行业的朋友们来说,多数人都会有这样一个先入为主的看法——移动端开发比PC端开发简单。但是,随着时间的推移、工作阅历的增加、工作经验的积累,笔者相信很多人会慢慢开始否定最初的这种看法。

笔者猜测多数人有上述看法的原因归根到底在于PC端的兼容性问题。其中最让前端人员“愤青”的当属微软自家的产品——IE系列浏览器。笔者估计:IE6曾经是不少前端开发人员的“眼中钉,肉中刺”。

随着微软做出放弃自己旗下的IE系列浏览器的决定,前端人员PC端开发的压力也逐渐减小。可以毫不夸张的说:因为IE系列的存在,导致前端行业的发展相对于其它行业落后了数年之久。

近几年,随着移动互联网的快速发展,移动端开发变得越来越重要。

在开发移动端的过程中,时间久了,相信很多人都会感慨:移动端开发也是一个“无底洞”,开发的道路上也是遍布“荆棘”。

当我们把写好的移动端网页,用苹果手机的Safari浏览器打开,就会发现一个特别让人讨厌的橡皮筋效果(专业称呼叫“回弹效果”)。同样的网页,在安卓手机上就不会出现。由此我们可以得出一个结论:橡皮筋效果是苹果手机给我们附加上去的。

很多时候,我们为了要保持网页效果的一致性,我们不得不阻止掉橡皮筋效果。在阻止掉苹果手机的橡皮筋效果之前,我们首先要明白回弹效果是怎么产生的。

网上搜索得知:苹果手机的回弹效果属于浏览器的默认行为,因此我们只需要阻止掉浏览器的默认行为即可。

通过下面的代码实现:

  1. document.addEventListener('touchstart', function(ev) {
  2.     ev.preventDefault();
  3. }, false);

虽然上面的方法可以彻底阻止橡皮筋效果,但是却给我们带来了一堆问题。由于我们阻止了浏览器的默认行为(主要是PC端的事件),导致页面中所有元素的默认行为失效,包括a链接点击无法跳转,input点击无法获取焦点,页面无法滚动等问题。

当然,这些问题都能找到对应的解决方案:

对于a链接点击无法跳转,我们可以借助jQuery为页面中所有a链接通过事件绑定的方法添加touchstart事件,并进行location.href赋值操作。

  1. $('a').on('touchstart', function() {
  2.     location.href = $(this).attr('href');
  3. });

对于input点击无法获取焦点,我们可以借助jQuery为页面中所有type为text的input元素通过事件绑定的方法添加touchstart事件,并阻止事件冒泡。

  1. $('input[type=text]').on('touchstart', function(ev) {
  2.     ev.stopPropagation();
  3. });

对于页面无法滚动,我们只能自己封装函数处理或找相关插件来解决(滚动插件推荐使用better-scroll)。

阻止浏览器的默认行为除了能有效阻止橡皮筋效果外,还有如下好处:

1、在写移动端的事件时,有时可能会遇到点透问题,可以通过上述方法解决;

2、手指常按页面文字或图片时,有时想屏蔽掉系统弹出菜单,可以通过上述方法解决;

3、在iOS10中,Safari浏览器中meta标签的user-scalable=no(禁止用户缩放属性)失效问题,可以通过上述方法解决;

4、在iOS10中,Safari浏览器中body添加overflow: hidden;有时依然出现子元素超出body宽度后可以横向滚动的问题,可以通过上述方法解决。

如果你既想阻止橡皮筋效果,又想避免a链接的点击跳转失效和input点击无法获取焦点问题,那么你可以使用如下代码。

  1. document.addEventListener('touchmove', function(ev) {
  2.     ev.preventDefault();
  3. }, false);

上面代码同touchstart一样,使用之后页面也将无法滚动。因此,我们只能自己封装函数处理或找相关插件来解决(滚动插件推荐使用better-scroll)。

    A+
发布日期:2017年01月04日  所属分类:JavaScript
标签:
shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

  1. 随便吧 0

    多谢了