MUI框架div模拟按钮（日期选择器）导致双击才能弹出选择框，移动端Web不支持dblclick双击的问题。

最新推荐文章于 2023-07-31 17:27:55 发布

流都

最新推荐文章于 2023-07-31 17:27:55 发布

阅读量1.8k

点赞数

分类专栏： mui问题文章标签： mui 移动端 dblclick 双击

本文链接：https://blog.csdn.net/qq_42207957/article/details/80313122

版权

mui问题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一些前任项目遗留的问题，mui坑太多，不知道为什么要用div模拟日期选择的button按钮，导致使用时点击2次才能弹出日期选择框，但是他之前的项目都没问题，可以单击弹出，浪费了我大量时间排查原因。

★ 解决方案1：单击tap绑定双击想法，结果：无法实现

∵因为有这个tap绑定恢复click的办法

mui("#refreshContainer").on('tap', '.ulDiv', function (event) {
this.click();
});

$('.ulDiv').click(function(){
    alert(1);
	})

∴就想尝试用tap模拟双击dblclick

mui("#refreshContainer").on('tap', '.ulDiv', function (event) {
this.dblclick();
});

结果：无效
原因是对于移动端来说：

双击（dblclick功能）这种交互原生不支持；
Android有实现双击缩放查看图片的仿微信照片查看器如PhotoView，IOS暂未发现；

★ 引申问题：怎么才能在移动端实现双击绑定事件：

除了安卓微信里可响应双击，安卓浏览器/IOS均不响应。

♦ 使用hammer.js来实现双击，安卓和IOS微信和浏览器里均可以响应；

存在的不足：

１．IOS浏览器里，双击放大图片，当图片大于屏幕宽度时，其网页大小也会有所影响，但微信里不会，由于这些功能只是在微信里使用，此问题不管；
２．有时反应不灵敏。当多次连续操作后，有时会不反应，继续操作才响应

可以调用微信JS-SDK来实现图片的预览.

♦ 可试方法1（vue.js）：

v-on:dblclick.native="zoomImage()"

♦ 可试方法2：

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);
            }
        });