开发中移动端的页面事件引发IOS的样式问题（1）

在移动端WebApp的IOS端开发时，总会出现或多或少的样式引发的交互问题，下面总结一下遇到的一些情况和解决方案：

一模态框、弹框滑动滚动，底部页面随着滑动、穿透的问题

引发原因：
在模态框和弹窗中本身容纳不下内容，需要让它不断滚动来展示，但因为事件是冒泡的，有时就会造成底部（body 的Z-index肯定是在下面的）的内容也在滚动，有时候在滚动弹窗的时候，也会让底部的页面一起滚动，或者导致弹窗的滑动不流畅、卡死的状况。
解决方案：

阻止苹果浏览器的默认行为：禁用掉引发全局交互的事件，及窗体内受禁用影响的相应交互操作的抽象。如禁用touchmove事件，窗体内受禁用影响的内容滚动、滑屏轮播等的抽象。
可以通过js来监控页面的事件（不做例子展示）

$(“.zzc”).on(“touchmove”,function(){
　　　　event.preventDefault();
});
注意：.zzc是遮罩层的名字

转载自：https://blog.csdn.net/AliceWu_1111/article/details/79173764
可参考：
https://blog.csdn.net/qq_14993375/article/details/79895743
https://blog.csdn.net/weixin_30367543/article/details/96354358
https://blog.csdn.net/zgrkaka/article/details/78738231
https://blog.csdn.net/github_36487770/article/details/78971761

也可以通过样式来改变（本人采用此方法）

  -webkit-touch-callout: none;
  -webkit-user-select: none;

二在模态框、弹框position fixed 在ios上滑动不固定问题

引发原因：在模态框和弹窗中本身容纳不下内容，需要让它不断滚动来展示，如果内容过长，超出了手机的高度，页面往上或往下滑动的时候，按钮就会跟着页面滚动，原因是将button和内容平级了，包含在了同一个父级

<div>

    <span>内容</span>

    <!---按钮是position：fixed--->

    <button style='position:fiexd'>点击提交</button>

</div>

解决方案：
1. 将button与内容的父级平级，就解决此问题

<div>

    <span>内容</span>

   <!---按钮是position：fixed--->

</div>

<button style='position:fiexd'>点击提交</button>

可参考：https://blog.csdn.net/liuxiaoyu334433/article/details/79528564?utm_source=blogxgwz4

在使用position:fixed的元素上加上transform: translateZ(0)

<div>

    <span>内容</span>

	<!---按钮是position：fixed--->

    <button style='position:fiexd;transform: translateZ(0);'>点击提交</button>

</div>

可参考：https://www.jianshu.com/p/ef17f90cffa2

三 input点击焦点，软键盘弹起后，输入框部分样式消失，仍可以执行输入，被撑起上移动的页面，没有归位（复现于ios6s）

引发原因：
解决方案：
覆盖在原来已有的样式上：

className={`${styles.fetchWrapperContainer} ${styles.iosTouch}`}
className={`${styles.container} ${styles.iosTouch}`}

.container {
  width: 100%;
  background-color: #fff;
}
.fetchWrapperContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fetchWrapperContent{
  flex-grow: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.iosTouch{
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

可参考：
https://blog.csdn.net/meichaoWen/article/details/88681140
https://blog.csdn.net/u013362969/article/details/89920235
https://blog.csdn.net/yan_yuanfeng/article/details/81018799
https://blog.csdn.net/zhangwenwu2/article/details/74637060
https://blog.csdn.net/honourable/article/details/79442860

四扩展

-webkit-touch-callout
概述：-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
语法：-webkit-touch-callout：behavior
默认值：inherit
适用于：链接元素比如新窗口打开，img元素比如保存图像等等
取值：
none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用

CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
兼容性：
iOS 2.0及更高版本的Safari浏览器可用
Android尚不明确

五总结

归根结底，其实是关于 touch 和click 的执行顺序问题：
当一个用户在点击屏幕的时候，系统会触发touch事件和click事件，touch事件优先处理，touch事件经过捕获，处理, 冒泡一系列流程处理完成后，才回去触发click事件，click有200-300ms的延迟，自己可以打印去印证一下。
touchstart， touchmove，touchend， touchcancel， touchcancel, click。
一般来说，它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel ->click . 其中touchcancel一般情况下不会触发，tocuhmove也不一定会执行，因为要有滑动的操作。

文章内容参考：
https://blog.csdn.net/qq_35430000/article/details/87076146
https://blog.csdn.net/feniuben/article/details/21159271

感谢以上博主的贴子，在此表示感谢！如果觉得不妥，请通知我修改文章