移动端Web如何实现IOS双击事件。

bolelee
  • 1.2k

问题:图片绑定了一个双击事件,双击可切换放大/缩小查看图片,在安卓手机正常响应,但在Chrome浏览器模拟器里双击事件不响应,在苹果手机也不响应;使用的是vue的事件绑定v-on:dblclick="", 暂时不知道原因,麻烦知道的告诉一声,谢谢了!
相关代码如下:

<div id="V_zoom" class="mask J_zoom">
  <header class="cb_header secondary">
    <span @click="closePreImg()" class="back"><i class="angle left large icon"></i>返回</span>
  </header>
  <div class="mask-content" style="display: flex; align-items: center;">
    <div style="min-width: 100vw; text-align: center;">
      <img v-on:dblclick="zoomImage()" :src="photo.image_url" :alt="photo.description" :width="showSize.width" :height="showSize.height">
    </div>
  </div>
  <div class="bottom-text">
    {{ photo.description }}
  </div>
</div>
回复
阅读 12.1k
3 个回答
✓ 已被采纳

找了一圈,再次确认下:

  • 首先,双击这种交互原生不支持;

  • Android有实现双击缩放查看图片的仿微信照片查看器如PhotoView,IOS暂未发现;

  • IOS微信客户端由UIWebview升级为WKWebview,对于Web端开发有什么影响?
    IOS网页开发适配指南

原本的实现:除了安卓微信里可响应双击,安卓浏览器/IOS均不响应。

使用hammer.js来实现双击,安卓和IOS微信和浏览器里均可以响应;存在的不足:
1.IOS浏览器里,双击放大图片,当图片大于屏幕宽度时,其网页大小也会有所影响,但微信里不会,由于这些功能只是在微信里使用,此问题不管;
2.有时反应不灵敏。当多次连续操作后,有时会不反应,继续操作才响应


2017-06-19补充:
一直忘了来更新,其实只在微信里使用的话,可以调用微信JS-SDK来实现图片的预览.

可以这样实现

        var lastClickTime = 0;
        var clickTimer;
        document.getElementById('xxx').addEventListener('click', (event) => {
            var nowTime = new Date().getTime();
            if (nowTime - lastClickTime < 400) {
                /*双击*/
                lastClickTime = 0;
                clickTimer && clearTimeout(clickTimer);
                alert('双击');
                
            } else {
                /*单击*/
                lastClickTime = nowTime;
                clickTimer = setTimeout(() => {
                    alert('单击');
                }, 400);
            }
        });
v-on:dblclick.native="zoomImage()" 试过没
宣传栏