WEB前端之IOS兼容

1 点击事件失效

    $('body').on('click','.list',functioin(){
        alert(1);
    });
    

执行以上事件失效是因为body默认是不可点击元素，div、span等同样默认不可点击若要解决以上问题有几种方法

    1.给目标元素加一条样式规则 cursor:pointer ；
    2.将 click 事件委托到非 document 或 body 的父级元素上；
    3.pointer就是绑定的盒子换成可点击的，a；
    4.将 click 事件直接绑定到目标元素（即 .list）上；
    5.使用delegate方法，但是委派元素不可选择document或者body
	   eg: $('#taurus_status').delegate(' .status_list','click',function(event){
	       		 $($(this).children()[0]).toggleClass('hot');
	 	})

建议使用第1种，4、毕竟用了事件委派肯定是js操作过程中使用append等方法添加进去的标签，直接选是无法选中的，2、3条如果可以一般也不会绑到body上了，如果前四种都不可以在选择第五种

2.window.location.href失效

这个没有好的解决方法，如果location可以用就用，不能用的话就只能用a代替了H5+原生开发APP千万注意，页面跳转不用a链接的话就用原生方法返回吧，location是不可以用的

3.attr(‘selected’,‘selected’)方法失效

	 $(optionArr[0]).prop('selected','selected');
	 $(optionArr[0]).removeProp('selected','selected');
	 来解决

除select之外还有 async 、autofocus、checked、location(i.e.window.location)、multiple、readOnly这些属性写移动端的话就使用prop方法吧。

4.scroll事件卡顿

    给body添加
        overflow-x: hidden; 
    滚动元素添加
        overflow-y: auto;
        -webkit-overflow-scrolling: touch

5.ios new Date(‘yyyy-mm-dd’)报错

Sasfari浏览器不支持yyyy-mm-dd只支持’yyyy/mm/dd’

    var date = '2019-01-03'
    > 方案二 拆分字符串
        var yearArr = date.split('-');
        var birth = yearArr[0]
        for(var i = i ; i < yearArr.length ; i++){
            birth += ( '/' + yearArr[i] );
        }
        birth = new Date(birth);
    > 方案一 字符串替换
        var newDate = date.replace(/\-/g,'/');
        var birth = new Date(newDate)

6.ios audio/video自动播放解决方案 vue版

ios与谷歌一样都是禁止音频自动播放的，这里只是笔者使用的解决方案有更好的期待分享

> 要用touchend
<template @touchend.once="playAuto">
    <audio src="audio.mp3" ref="audio" loop preload>您的浏览器不支持 audio 标签。</audio>
<template>
> this.$f.getsignature这个函数为微信jssdk初始化调用函数
<script>
export default {
  mounted () {
    this.$nexttick(() => {
      this.canplayFn(this.$refs.audio)
    })
  },
  methods: {
    playAudio () {
      this.$refs.audio.play()
    },
    // 初始化
    canplayFn(e) {
      e.play()
      e.pause()
      const _this = this
      this.$f.getsignature('autoPlay', res => {
        if (res) {
          setTimeout(() => {
            _this.playAudio()
          }, 250)
        }
      })
    }
  }
}
</script>