使用 Javascript 的单击并按住事件侦听器 [关闭]答案

【问题标题】：Click and Hold event listener with Javascript [closed]使用 Javascript 的单击并按住事件侦听器 [关闭]
【发布时间】：2016-11-13 12:38:38
【问题描述】：

我想制作一个带有 Click and Hold 事件效果的页面，例如 http://andeinerseite.video/ 或 http://2016.makemepulse.com/，我对使用什么框架来创建这些效果很感兴趣。

【问题讨论】：

不确定这是一个实际的框架还是他们自己做的事情，但我猜底层的事情只是在mousedown 事件开始做一些事情，然后在mouseup 停止它。
一个好问题，有 7 人赞成接受的答案，但只有 1 人赞成这个问题？会发生什么？
@novonimo 这不是一个很好的问题，由于来自搜索引擎的流量（在撰写本文时有 22k 次浏览）以及有人写了一个好的答案，它恰好成为了一个规范的结果并提供解决常见问题的工作代码。目前，该问题有 5 个赞成票和 3 个反对票。
非常感谢您提供有关此主题的有用信息@ggorlen

标签： javascript css effects dom-events

【解决方案1】：

您可以使用 Javascript 的 setTimeout 函数并将其绑定到 mousedown 事件。看看下面的sn-p：

// click and hold event listener

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hold_trigger">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>

希望这会有所帮助！

【讨论】：

【解决方案2】：

使用 plain javascript，您可以执行以下操作：

selector.addEventListener('mousedown', function(event) { 
  // simulating hold event
  setTimeout(function() {
    // You are now in a hold state, you can do whatever you like!
  }, 500);
});

您可以将 500ms 值调整为适合您需要的任何时间跨度。

【讨论】：

这增加了响应 mousedown 的延迟，但如果 mousedown 之后紧接着 mouseup（即短按），那么您处于保持状态 500 ms 是不正确的之后。如果 mouseup 事件触发得太快，您需要清除超时，如 here 所示。