0%

ios移动端浏览器不支持dblclick事件触发

发布于 / 分类: 锋利的JQuery / 暂无评论 / 阅读量 37

最后更新于 2019年12月03日

ios端他自己有一个双击空白区域会自己放大缩小视窗,我怀疑就是这个功能导致dblclick无法正常触发,于是只能通过单次cilick来判断了.

当第二次click的触发时间小于400ms说明是双击,于是通过创建时间戳进行对比.

 let lastClickTime = 0;
 let clickTimer;
 $('#body').on("click", e => {
   let nowTime = new Date().getTime();
      if (nowTime - lastClickTime < 400) {
         /*双击*/
         lastClickTime = 0;
         clickTimer && clearTimeout(clickTimer); 
         alert("双击");
      } else {
         /*单击*/
         lastClickTime = nowTime;
         clickTimer = setTimeout(() => {
            // alert("单击");
         }, 400);
      }
 });

用jq的方法给元素绑定一个click事件,当第一次点击时,lastClickTime上一次的触发为0,还没有赋值,nowTime 为现在的时间,nowTime - lastClickTime可以理解为2019年- 0 年,怎么也要大于400ms,这里就识别为单独一次click,然后我们将这次的nowTime赋值给lastClickTime,等待下一次click时用于判断,由于click单次肯定触发快于双击,所以我们给他加上一个定时器,400ms后触发,如果400ms后未发生双击就触发,双击了,前面的单击不运行,于是在if判断中触发时间小于400ms,判断为双击,然后将lastClickTime 重置为0,下次双击也是相同套路判断.

然后判断,如果单击的定时器存在,我们就清除掉,然后在运行双击需要触发的函数即可.

vant组件ImagePreview 遇到的一个问题 vue cli初始化遇到的两个报错
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao