使用Javascript单击并保持事件侦听器

Click and Hold event listener with Javascript

本文关键字：事件 侦听器 Javascript 单击 使用      更新时间：2023-09-26

我想制作一个具有点击和保持事件效果的页面，如http://andeinerseite.video/或http://2016.makemepulse.com/，我对使用什么框架来创建这些效果感兴趣。

您可以使用Javascript的setTimeout函数并将其绑定到mousedown事件。请看下面的代码片段:

// 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>

希望这对你有帮助!

使用纯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值调整为适合您需要的任何时间范围。

相关文章：