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

Question

背景:

我的网站是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,也不会在双击时执行任何操作.顺便说一下,我在三星Galaxy上测试它,不确定它是否是一个正确的测试设备,并使用JQUERY PLUGIN(不是jquery mobile).

Answer 1

如果您想要定位移动设备,那么您可以使用touchstart触摸相当于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()
});

演示

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

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

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

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

Answer 2

这是为我做了神奇的最终工作代码:)我刚刚复制并粘贴了所有代码,但是可以根据自己的需要使用它.

   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='<?php echo $this->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='<?php echo $this->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);
                 });
            }
        }

Answer 3

这是我的技巧。这是一个小代码块，应该可以在移动设备上正常运行。当您第一次点击某物时，它会设置一个计时器，然后检查第二次点击是否在时间范围内（本例中为 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; }
    });