触摸设备，单击和双击事件处理程序 jQuery/Javascript? [英] Touch device, Single and Double Tap Events handler jQuery/Javascript?

问题描述

背景:

我的网站采用 magento 开源电子商务解决方案，顶部(标题)有一个购物车图标.在桌面上，当用户将鼠标悬停在该图标上时，它会显示购物车中的内容(项目).但是点击该图标后，用户就会进入购物车页面.

我想要:

我希望只有触摸设备才有能力，当用户单击图标时，它应该只显示内容，但是当双击图标时，它应该将它们带到购物车页面.

HTML 代码:

<!-- 这个下面的 div 总是可见的，并且在点击这个或它的任何一个元素时，需要的行为是预期的 --><div class="dropdown-toggle cover" title="查看包"><div class="feature-icon-hover"><a href="example.com/checkout/cart/" title="购物袋"><span class="第一个接近文本的图标 i-cart-wb force-no-bg-color">&nbsp;</span><div class="hide-below-960">我的包</div></a><div class="标签数量"><a href="example.com/checkout/cart/" title="购物袋">(1)</a>
<a class="summary" href="example.com/checkout/cart/" title="购物袋"><span class="小计"><span class="price">$28</span></span></a><span class="caret">&nbsp;</span>

<!-- 结束:下拉切换 >div -->

<!-- 结束:下拉切换--><!-- 默认情况下是不可见的，需要在单击时显示--><div class="dropdown-menu left-hand" style="display: none;"><!-- 所有内容都在这里-->

我已经尝试过的:

jQuery(function($){/* 检测用户代理的代码，如果是移动设备则执行代码*/if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {//单次触摸$("#mini-cart .dropdown-toggle").on('click', 'a', function(e){e.preventDefault();$("#mini-cart .dropdown-menu").show();});//双击$("#mini-cart .feature-icon-hover").find('a').dblclick(function(e){location.href = '/checkout/cart';//警报('dblclick');});}});

此代码确实阻止了单击时的默认行为，但不显示内容 div，双击时也不执行任何操作.顺便说一句，我正在三星galaxy上测试它，不确定它是否是一个正确的测试设备，并使用JQUERY PLUGIN(不是jquery mobile).

解决方案

如果您想针对移动设备，那么您可以使用 touchstart，它是 mousedown 的触摸等效项.虽然支持触摸的桌面浏览器也可以使用它，所以如果这不适合你，也许你仍然需要进行用户代理检测.最后我检查过，没有任何我们可以挂钩的内置双击"事件，但我们可以手动检查点击或双击.代码看起来像

var tapped=false$("#mini-cart .dropdown-toggle").on("touchstart",function(e){if(!tapped){//如果没有设置tap，则设置单击Tapped=setTimeout(function(){抽头=空//插入你想在单击时做的事情},300);//等待 300 毫秒，然后运行单击代码} else {//在上次点击后 300 毫秒内点击.双击清除超时(点击)；//停止单击回调抽头=空//插入你想双击时做的事情}e.preventDefault()});

演示

这应该适用于任何支持触摸的浏览器.

另一种选择，虽然有点重，但使用 Hammer.js.这是一个非常好的处理触摸事件的库.并且它还将鼠标和触摸事件聚合为一种类型的事件.例如，对于点击和双击它本质上是

Hammer(el).on("tap", function() {//单键的东西});Hammer(el).on("doubletap", function() {//双击东西});

这也适用于鼠标事件，这可能不是您想要的.如果只是为了这个，那就有点矫枉过正了.但是如果你打算做更多与触摸相关的事情，我建议你使用这个库.

Background:

My site is in magento open source ecommerce solution, and in the top (header) it has a shopping cart icon. On dekstop, when user hovers mouse over that icon, it shows the content (items) in shopping cart. But on click of that icon, it takes the user to shopping cart page.

I want:

I want to have the ability, only for touch devices, that when a user single tap on icon, it should display the content only, but when double tap the icon, it should take them to the cart page.

HTML CODE:

<div id="mini-cart" class="dropdown is-not-empty">

    <!-- This below div is always visible and on tap of this or either of it's any elements, required behaviour is expected -->
    <div class="dropdown-toggle cover" title="View Bag"> 
        <div class="feature-icon-hover">

            <a href="example.com/checkout/cart/" title="Shopping Bag">
                <span class="first close-to-text icon i-cart-wb force-no-bg-color">&nbsp;</span>
                <div class="hide-below-960">My Bag</div>
            </a>

            <div class="label amount">
                <a href="example.com/checkout/cart/" title="Shopping Bag">(1)</a>
            </div>

            <a class="summary" href="example.com/checkout/cart/" title="Shopping Bag">
                <span class="subtotal">
                    <span class="price">$28</span>
                </span>
            </a>
            <span class="caret">&nbsp;</span>

        </div> <!-- end: dropdown-toggle > div -->
    </div> <!-- end: dropdown-toggle -->

     <!-- This one is invisible by default, and needs to be shown on single tap -->
    <div class="dropdown-menu left-hand" style="display: none;">
          <!-- All THE CONTENT GOES HERE -->
    </div>
</div>

What I already tried:

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

This code does prevent from default behaviour on single tap but does not show content div, also does not do anything on double tap. By the way, I am testing it on samsung galaxy, not sure whether it is a correct device for testing, and using JQUERY PLUGIN (not jquery mobile).

解决方案

If you want to target mobile then you can use touchstart which is the touch equivalent of mousedown. though touch capable desktop browsers can also use this so maybe you still need to do user-agent detection if that doesn't suit you. Last I checked, there wasn't any built in "double tap" event we can hook onto, but we can manually check for a tap or a double tap. The code would look something like

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

Demo

This should work on any touch enabled browser.

An alternative, though a bit heavy for just this, is to use Hammer.js. It's a really nice library for handling touch events. And it also aggregates mouse and touch events into one type of event. For example, for tap and double tap it'll essentially be

Hammer(el).on("tap", function() {
    //singletap stuff
});
Hammer(el).on("doubletap", function() {
    //doubletap stuff
});

This also works for mouse events too, which might not be what you want. And it is a bit overkill if it's just for this. But if you plan to do more touch related stuff, I would recommend using this library.

这篇关于触摸设备，单击和双击事件处理程序 jQuery/Javascript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！