ios事件混乱+点击事件失效+一些兼容问题解决「坑记」
ios12下，h5事件在微信浏览器内，事件混乱
现象：例如点击文本框，输入文字后，会发现整个网页的点击事件都无法触发，像失效了一样。
根本原因：根本原因是：input聚焦后页面被顶起，然后失焦后页面回位，但是这里只是视觉上回位了，window其实已经被顶上去一定的距离。所以当你再次点击页面时，其实已经就是错位的了，目前只发现部分ios在微信浏览器有这种问题。
解决方案：引用js即可。
// 兼容部分ios手机input失焦后页面上移问题
(function() {
let myFunction;
let isWXAndIos = isWeiXinAndIos();
if (isWXAndIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
clearTimeout(myFunction)
})
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
clearTimeout(myFunction)
myFunction = setTimeout(function() {
window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置
}, 200)
})
}
})()
function isWeiXinAndIos() {
// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
let ua = '' + window.navigator.userAgent.toLowerCase()
// 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
let isWeixin = /MicroMessenger/i.test(ua) // 是在微信浏览器
let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统
return isWeixin && isIos
}
function isWeixin() { //判断是否是微信浏览器
return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
}
function trim(str) {
return String.prototype.trim.call(str);
}移动端点击返回时强制页面刷新解决办法（pageshow）
现状：物理键返回后，一些失效的信息依然显示在页面上。
为了解决这个办法，最终选择使用pageshow方法。
onpageshow事件在用户浏览网页时触发。
onpageshow事件类似onload事件，onload事件在页面第一次加载时触发，onpageshow事件在每次加载页面时触发。即onload事件在页面从浏览器缓存中读取时不触发。
window.addEventListener('pageshow', function(e) {
if (e.persisted || window.performance && window.performance.navigation.type == 2) {
location.reload();
}
}, false);jquery 点击页面其他地方关闭某个div？
思路 ：通过点击页面的任意位置都能关闭div，主要是$(document).click事件.
$(document).click(tap);//点击执行tap方法
function tap(ev) {
//需要判断符合需求的点击区域
if (ev.target != $('.cityName')[0] && !$(ev.target).parents('.dropDown').hasClass('eventHide') ) {
$('.dropCity,.dropProv').css('display',"none");//指定div关闭
}
}iOS下的点击事件失效解决方法
当委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的(如 div, span 等)，此时 click 事件会失效。
原因：ios不认为div、span元素是可以点击的。
--> 解决方案：
将目标元素换成 <a> 或者 <button> 等可点击的元素 //推荐这种
给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)
给目标元素添加一个空的 onclick=""(<div class="target"onclick="">点击我!</div>)解决Firefox中刷新页面，不重置输入的值
-->解决方案：
在form加autocomplete="off"或者给各个input加autocomplete="off",
注意点:不要用JQuery设置$("form").attr("AUTOCOMPLETE","off")这种方案;