有没有办法实现“单击”、“双击”和“单击并按住”来处理同一个元素？答案

【问题标题】：Is there a way to implement "click", "double click" and "click and hold" to work on the same element?有没有办法实现“单击”、“双击”和“单击并按住”来处理同一个元素？
【发布时间】：2019-12-15 21:53:24
【问题描述】：

我想在 Android 上实现点击 Instagram 中的帖子之类的功能（我认为在 iOS 上应该是相同的功能）。在 Instagram 中，如果有人点击一张照片，它会打开，双击它会被点赞，然后点击并按住会打开一个带有该图像和一些文本/按钮的弹出窗口。 Instagram 只在 Native App 中这样做，而不是在他们的 PWA 中，但我想在我的 PWA 中实现类似的功能。

[未尝试，因为我希望找到一个“官方”的方式]：我认为，应该可以使用 mousedown mouseup 和自定义函数来计算秒数。

但这真的是“完美”的方式吗？

【问题讨论】：

标签： javascript html vue.js nuxt.js

【解决方案1】：

然后我通过 https://www.npmjs.com/package/vue2-touch-events 为 VueJS 解决了这个问题。简单查询元件何时按下（开始）和压力何时停止并计算其间的时间。如果超过 x 秒，则会弹出一个弹窗，如果您在未达到秒数的情况下松开，则执行正常单击。

【讨论】：

【解决方案2】：

Clik and hold

请参考以下帖子，如果单击并按住一段时间，它将打开菜单。 Click and Hold event listener with Javascript

双击

<p ondblclick="myFunction()">Double-click me</p> https://www.w3schools.com/jsref/event_ondblclick.asp

看下面的例子，我加了双击和click & hold

 function doubleClickFunction(){
    $('.hold_trigger').css({'border':'1px solid red'});
  }
var timeout_id = 0,
    hold_time = 1000,
    hold_menu = $('.hold_menu'),
    hold_trigger = $('.hold_trigger');

hold_menu.hide();

hold_trigger.mousedown(function() {
    timeout_id = setTimeout(menu_toggle, hold_time);
}).bind('mouseup mouseleave', function() {
    clearTimeout(timeout_id);
});

function menu_toggle() {
  hold_menu.toggle();
}

ul.hold_menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.hold_menu a, div.hold_trigger  {
   display: inline-block;
   padding: 5px 15px;
   border: 1px solid #ccc;
   width: 300px;
}

ul.hold_menu a:link, ul.hold_menu a:visited {
   color: black;
   text-decoration: none;
}

ul.hold_menu a:active, ul.hold_menu a:hover {
   background: #ff0;
   text-decoration: none;
}

div.hold_trigger {
   color: black;
   cursor: pointer;
}

div.hold_trigger:hover {
   background: #ccc;
}

 <div class="hold_trigger" ondblclick="doubleClickFunction()">Click and hold to toggle the menu</div>
  <ul class="hold_menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li><a href="#">Option 3</a></li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

【讨论】：

工作解决方案，但我搜索了一些与 vuejs 相关的内容。最好是 Nuxtjs....但是谢谢。

【解决方案3】：

Javascript 有 click 和 dblclick 事件。但是在单个元素中同时使用两者并不好，因为它会触发两个事件。

Here 是您提到的javascript中双击的实现。

【讨论】：