微信公众号 ios手机上 document.body.addEv

场景：园区动态、园区主页等详情页的图片需要点击放大。

<div v-html="articleDesc.body" class="body_news_desc_a"></div>

 mounted () {
    this.listenClickedBody()
  },
methods: {
  // 监听点击事件
    listenClickedBody () {
      let self = this
      document.body.addEventListener('click', function (event) {
        if (event.target.nodeName === 'IMG' && !self.isShowpreviewImage && (event.target.className !== 'img-default' && event.target.className !== 'img-qrcode')) {
          self.imageViewerList = []
          let newImage = {
            url: event.target.currentSrc
          }
          self.imageViewerList.push(newImage)
          self.isShowpreviewImage = true
        }
      }, false)
    },
}

.body_news_desc_a img {
    /* 可能导致冲突的属性 */
    vertical-align: middle;
    max-width: 100% !important;
    height: auto !important;
    cursor: pointer; 
  }

解决办法有 4 种可供选择：

• 1、将 click 事件直接绑定到目标​元素（​​即 .target）上
• 2、将目标​元素换成 <a> 或者 button 等可点击的​元素
• 3、​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上
• 4、给​目标元素加一条样式规则 cursor: pointer;
  ​推荐后两种。从解决办法来看，​推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

我这里使用的方法：

给​目标元素加一条样式规则 cursor: pointer;

原文链接：https://blog.csdn.net/CamilleZJ/article/details/78028847