移动端click事件300ms的延迟与双击屏幕缩放的历史原因

1. IOS移动终端点击事件300毫秒延迟响应

移动设备上的网页有300毫秒的延迟，这通常会导致按钮单击延迟甚至单击失败。这是由于历史原因导致区分双击事件和双击屏幕缩放，

2007年，苹果在iPhone上发布了第一款配备IOS系统的野生动物园。为了在移动端的PC端更好地显示适合大屏幕的网页，使用了双击缩放（双击缩放）解决方案。例如，如果使用手机上的浏览器在PC上打开网页，则可能会看到该页面的内容。尽管它可以填满整个屏幕，但字体和图片很小而且不清楚。此时，您可以快速双击屏幕的一部分，可以看到该部分的放大内容，然后再次双击以返回原始状态。

点按两次即可进行缩放，这意味着您可以用手指在屏幕上快速点击两次。 IOS随附的Safari浏览器会将网页缩放到原始比例。

原因在于浏览器需要如何判断快速单击。当用户单击屏幕上的元素（例如跳转链接）时，浏览器将首先捕获该点击，但是浏览器无法确定用户是否只需要单击链接还是双击区域的一部分即可放大或出去。因此，在捕获到第一次点击后，浏览器将保持一段时间。如果在此期间用户下次未单击，浏览器将执行单击跳转链接的处理。如果用户在这段时间内执行第二次单击操作，则浏览器将禁止跳转，而是对页面部分执行缩放操作。那么这个时间间隔t是多少？在IOS Safari中，大约需要300毫秒。这是300ms延迟的根源。结果是用户只需单击页面，页面就会花一些时间来响应，从而给用户带来缓慢的体验。对于Web开发人员而言，页面JS的回调函数处理将捕获click事件，该过程需要300毫秒才能生效。间接影响其他业务逻辑的处理。

解决方案：

这300ms的延迟将导致另一个问题-单击以穿透

点击渗透的原因：

1.浏览器具有300ms的延迟，以便区分双击和缩放

2.移动事件的响应顺序：touchstart-> touchmove-> touchend->点击->点击

在300毫秒的时间范围内，上层元素被隐藏或移除，下层相同位置的元素触发click事件（普通元素是click事件回调函数效果，input和select是焦点事件，超链接是页面跳转）

解决方案是：

方案1：下部元素本身没有单击事件，没有输入选择标签，并且统一使用了触摸事件。解决方案2：下部元素本身没有单击事件。 upper元素的touchend事件回调函数可防止随后触发默认事件e。 preventDefault（）;

1 $("#cbFinish").on("touchend", function (event) {
2     //很多处理比如隐藏什么的
3     event.preventDefault();
4 });

计划3：延迟一定时间（300毫秒以上）来处理事件

1 $("#cbFinish").on("tap", function (event) {
2     setTimeout(function(){
3     //很多处理比如隐藏什么的
4     },320);
5 });    

方案4：在上层显示层之后添加相应的类名控件，切断显示层下焦点元素的事件获取2.在某些情况下，请Click事件以获取不可点击元素，例如（标签，跨度），IOS下载将不会触发，并且CSS会添加cursor：指针，并且此操作已完成。 3. H5底部的输入框被键盘挡住了

h5页面上的一个令人痛苦的问题是，当输入框位于底部时，单击软键盘后将阻止输入框。可以通过以下方式解决

方案一：

// 让dom元素出现在可见视图的顶部或底部,只要在input的点击事件，或者获取焦点的事件中，加入这个api就好了
document.querySelector('#inputId').scrollIntoView();

计划二：

//浏览器当前的高度
var oHeight = $(document).height();  
$(window).resize(function(){
  if($(document).height() < oHeight){ 
      $("#footer").css("position","static");
  }else{ 
    // 高度超出初始状态,设置绝对定位,可以让底部输入框显示在可见区域
      $("#footer").css("position","absolute");
  }
});

4.不要让Android手机识别电子邮件

<meta content="email=no" name="format-detection" />

5.阻止iOS将长字符串识别为电话

<meta content="telephone=no" name="format-detection" />

6.禁止iOS弹出各种默认操作窗口。在iOS上，当您按住触摸目标（例如链接）时，Safari浏览器将显示与该链接相关的系统默认菜单。此属性使您可以禁用系统默认菜单。适用于打开新窗口等链接元素，保存图像等img元素。

-webkit-touch-callout:none

7.消除过渡启面

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

8.在iOS系统的中文输入法中输入英语时，字母之间可能会出现六分之一的空格

// 可以通过正则去掉      
this.value = this.value.replace(/\u2006/g, '');

9.禁止ios和android用户选择文本

-webkit-user-select:none

1 0.在ios和Andriod中，音频元素和视频元素无法自动播放

解决方案：触摸屏即可播放

$('html').one('touchstart',function(){
    audio.play()
})

在1 1. ios下，输入时取消输入，并取消输入第一个英文字母的大写字母

<input autocapitalize="off" autocorrect="off" />

1 2.在Android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

13 CSS页面闪烁白色，冻结

解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3，不使用position的left和top来定位
2.开启硬件加速

  -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

1 4.防止在旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

1 5.输入的占位符将出现在文本位置的上侧

输入的占位符将出现在文本位置的上侧：PC侧将line-height设置为等于可以对齐的高度，但移动侧仍在上侧，解决方案是设置行高：正常

16往返缓存问题

单击浏览器的背面，有时js不会自动执行，尤其是在mobilesafari中。这与往返缓存（bfcache）有关。

// 解决方法 ：
window.onunload = function(){};

17修改丑陋的移动终端上的突出显示效果，这在iOS和Android上均有效：

* {-webkit-tap-highlight-color:rgba(0,0,0,0);}

但是，在当前的Android浏览器中，此方法只能删除橙色背景色，并且仍然无法删除通过单击生成的突出显示框。需要解决！

有一个CSS3属性。添加后，关联元素的事件监视将无效，这相当于使元素“可见，不可触摸”。 IE直到11才开始支持它，而其他浏览器的当前版本基本上都支持它。有关详细信息，请参见此处，它可以解决点击的难看突出显示效果。

pointer-events: none;

1 8.用户选择：无；导致iPhone5输入框中的光标不显示。如果在输入过程中未显示光标，则输入位置将不可见。因此该属性不能在输入元素上使用

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-357745-1.html