触摸设备,单击和双击事件处理程序jQuery / Javascript？

背景：

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

我想要：

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

HTML代码：

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

我已经试过了

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,也不会双击任何内容.顺便说一下,我正在三星级测试它,不知道它是否是一个正确的测试设备,并使用JQUERY PLUGIN(而不是jquery手机).

解决方法

如果您想要定位移动设备,那么您可以使用touchset,这是相当于mousedown的触摸.虽然触摸功能的桌面浏览器也可以使用这一点,所以也许您仍然需要进行用户代理检测,如果这不适合您.最后我检查了,没有任何内置的“双击”事件我们可以挂钩,但我们可以手动检查一个水龙头或双击.代码看起来像

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

这应该在任何触摸启用的浏览器上工作.

一个替代方案,虽然有点重,只是这个,是使用Hammer.js.它是一个非常好的图书馆处理触摸事件.并且它还将鼠标和触摸事件聚合成一种类型的事件.例如,点击和双击它将基本上是

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

这也适用于鼠标事件,这可能不是你想要的.如果只是为了这个,这有点过分了但是如果你打算做更多的触摸相关的东西,我建议使用这个库.