使用Java的Click and Hold事件监听器 [英] Click and Hold event listener with Javascript

问题描述

我想制作一个具有Click and Hold事件效果的页面，例如 http://andeinerseite.video/ 或 http://2016.makemepulse.com/ ，我对用于创建框架的框架感兴趣

解决方案

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

  //单击并按住事件listenervar 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）;}）;函数menu_toggle（）{hold_menu.toggle（）;}  

< pre class = snippet-code-css lang-css prettyprint-override> ul.hold_menu {list-style：none;填充：0; margin：0;} ul.hold_menu a，div.hold_trigger {display：inline-block;填充：5px 15px;边框：1px实线#ccc;宽度：300像素；} ul.hold_menu a：链接，ul.hold_menu a：访问{颜色：黑色；文本修饰：无；} ul.hold_menu a：有效，ul.hold_menu a：悬停{背景：＃ff0;文本修饰：无；} div.hold_trigger {颜色：黑色；光标：指针；} div.hold_trigger：hover {背景：#ccc;}

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =按住以切换菜单< / div>< ul class = hold_menu> < li>< a href =＃>选项1< / a>< / li> < li>< a href =＃>选项2< / a>< / li> < li>< a href =＃>选项3< / a>< / li>< / ul>  

div>

希望这会有所帮助！

I want to make a page with Click and Hold event effect, like http://andeinerseite.video/ or http://2016.makemepulse.com/, I'm interested in what framework uses to create those effects.

解决方案

You can use Javascript's setTimeout function and bind it to mousedown events. Have a look at the snippet below:

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

Hope this helps!

这篇关于使用Java的Click and Hold事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！