触摸设备，单击和双击事件处理程序jQuery / Javascript？
背景：
我的网站是magento开源电子商务解决方案，在顶部（标题）它有一个购物车图标。 在dekstop上，当用户将鼠标hover在该图标上时，它会显示购物车中的内容（项目）。 但是点击该图标，用户可以访问购物车页面。
我想要：
我希望只有触摸设备才有能力，当用户单击图标时，它应该只显示内容，但是当双击图标时，它应该将它们带到购物车页面。
HTML代码：
我已经尝试过的：
jQuery(function($){ /* Code to detect the user agent, if mobile device then execute the code*/ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { // on single touch $("#mini-cart .dropdown-toggle").on('click', 'a', function(e){ e.preventDefault(); $("#mini-cart .dropdown-menu").show(); }); // on double touch $("#mini-cart .feature-icon-hover").find('a').dblclick(function(e){ location.href = '/checkout/cart'; //alert('dblclick'); }); } });
此代码可防止单击时的默认行为，但不显示内容div，也不会在双击时执行任何操作。 顺便说一下，我在三星Galaxy上测试它，不确定它是否是一个正确的测试设备，并使用JQUERY PLUGIN（不是jquery mobile）。
如果您想要定位移动设备，那么您可以使用touchstart ，它相当于mousedown 。 虽然具有触控function的桌面浏览器也可以使用它，所以如果不适合你，你仍然需要进行用户代理检测。 最后我检查过，没有内置的“双击”事件，我们可以挂钩，但我们可以手动检查水龙头或双击。 代码看起来像
var tapped=false $("#mini-cart .dropdown-toggle").on("touchstart",function(e){ if(!tapped){ //if tap is not set, set up single tap tapped=setTimeout(function(){ tapped=null //insert things you want to do when single tapped },300); //wait 300ms then run single click code } else { //tapped within 300ms of last tap. double tap clearTimeout(tapped); //stop single tap callback tapped=null //insert things you want to do when double tapped } e.preventDefault() });
演示
这适用于任何支持触摸的浏览器。
另一种选择，虽然有点重，但是使用Hammer.js 。 这是一个非常好的处理触摸事件的库。 它还将鼠标和触摸事件聚合为一种类型的事件。 例如，对于轻敲和双击，它基本上就是
Hammer(el).on("tap", function() { //singletap stuff }); Hammer(el).on("doubletap", function() { //doubletap stuff });
这也适用于鼠标事件，这可能不是你想要的。 如果只是为了这个，那就有点矫枉过正了。 但是如果你打算做更多触摸相关的东西，我建议使用这个库。
这是为我做了神奇的最终工作代码:)我刚刚复制并粘贴了所有代码，但可以根据自己的需要使用它。
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { $('#dropdown_menu').css({ "right":'20%'}); var action; $('#continue_shopping').show(); $('#continue_shopping').bind('touchstart click', function(event){ setTimeout(function(e){ $('#mini-cart').removeClass('open'); $('#dropdown_menu').hide(); }, 1200, [event]); }); $('#dropdown-toggle').bind('touchstart', function(event){ var now = new Date().getTime(); var lastTouch = $(this).data('lastTouch') || now + 1 ; var delta = now - lastTouch; clearTimeout(action); if(delta<500 && delta>0){ window.location='getUrl('checkout/cart');?>'; }else{ //if(delta == -1){ $('#mini-cart').addClass('open'); $('#dropdown_menu').show(); $(this).data('lastTouch', now); action = setTimeout(function(e){ clearTimeout(action); }, 500, [event]); } $(this).data('lastTouch', now); }); if (typeof document.body.ontouchstart == "undefined") { $('#dropdown-toggle').bind('click', function(event){ var now = new Date().getTime(); var lastTouch = $(this).data('lastTouch') || now + 1 ; var delta = now - lastTouch; clearTimeout(action); if(delta<600 && delta>0){ window.location='getUrl('checkout/cart');?>'; }else{ //if(delta == -1){ $('#mini-cart').addClass('open'); $('#dropdown_menu').show(); $(this).data('lastTouch', now); action = setTimeout(function(e){ clearTimeout(action); }, 600, [event]); } $(this).data('lastTouch', now); }); } }
这是我的黑客。 这是一个小代码块，它应该在移动设备上运行良好。 它会在您第一次点击某个内容时设置一个计时器，然后检查第二个点击是否在时间范围内（本例中为600毫秒）
// DOUBLE TAP var timer = 0; $(document).on("click" , "#target" , function() { if(timer == 0) { timer = 1; timer = setTimeout(function(){ timer = 0; }, 600); } else { alert("double tap"); timer = 0; } });