1

Any idea about about how to use double click event in tablets or ipad. Like 'onmousedown' is equivalent to 'touchstart'.

4

6 回答 6

4

也许用于多点触控手势的hammer.js 库也会让您感兴趣:http ://eightmedia.github.com/hammer.js/

于 2012-06-01T12:09:28.067 回答
1
To Detect long press you can simply use like this.

<div id="element" style="width:200px;height:200px; border:1px solid red;">&nbsp;</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<!------------ Javascript Code ---------->

$('#element').each(function() {

    var timeout, longtouch;

    $(this).mousedown(function() {
        timeout = setTimeout(function() {
            longtouch = true;
        }, 1000);
    }).mouseup(function() {
        if (longtouch) {
            alert('long touch');
        } else {
            alert('short touch');

        }
        longtouch = false;
        clearTimeout(timeout);
    });

});​
于 2012-05-30T09:18:26.553 回答
1

我想一个快速的谷歌搜索会解决你的问题,简短的回答是肯定的。长答案是您最好使用像jQuery-mobile这样的框架来为您处理,为您提供 ontouch、scroll 等事件。

还研究了使这些点击事件更快的energet.js

也类似于这个stackvoverflow答案

于 2012-05-29T11:36:06.087 回答
1

过时的话题,但尚未标记为已回答,所以我想我会试一试。

在大多数情况下,向事件添加抽象层的 JavaScript 框架会有所帮助。(正如其他人指出的那样。)但是对于你不能的情况,试试这个。

var el = document.getElementById('myelement');
var numClicks = 0;  // count the number of recent clicks
var lastClickTime = 0;  // time of last click in milliseconds
var threshold = 50;  // you need to set this to a reasonable value

function isDoubleClick() {
    var r;
    if( numClicks == 0 ) {
      numClicks++;  // first click never counts
      r = false;
    } else if( new Date().getTime() - lastClickTime > threshold ) {
      numClicks = 1; // too long time has passed since lsat click, reset the count
      r = false;
    } else {
      numClicks++; // note: reset numClicks here if you want to treat triple-clicks and beyond differently
      r = true;
    }
    lastClickTime = new Date().getTime();
    return r;
}

var myClickFunction = function (event) {
    if( isDoubleClick() ) {
      // your double-click code
    } else {
      // plain click code
    }
}

// bind your own click function to the mouse click event
el.addEventListener("mouseclick", myClickFunction, false);
于 2013-02-27T10:21:41.407 回答
0

I tried something like this :

<------java script and jquery ------>

            var startTime,endTime;

                $('#main-content').mousedown(function(event){
                    startTime = new Date().getTime();
                    //any other action
                });
                $('#main-content').mouseup(function(event){
                   endTime = new Date().getTime();
                   if(isTouchDevice()){
                    if((endTime-startTime)>200 && (endTime-startTime)<1000 ){
                        alert('long touch')

                    }
                  }

                });

function isTouchDevice(){
  return (typeof(window.ontouchstart) != 'undefined') ? true : false;
}
于 2012-06-01T06:46:45.730 回答
0
Try to implement doubleTap you can use this code.


(function($){
    // Determine if we on iPhone or iPad
    var isiOS = false;
    var agent = navigator.userAgent.toLowerCase();
    if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
           isiOS = true;
    }

    $.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
        var eventName, action;
        delay = delay == null? 500 : delay;
        eventName = isiOS == true? 'touchend' : 'click';

        $(this).bind(eventName, function(event){
            var now = new Date().getTime();
            var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
            var delta = now - lastTouch;
            clearTimeout(action);
            if(delta<500 && delta>0){
                if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
                    onDoubleTapCallback(event);
                }
            }else{
                $(this).data('lastTouch', now);
                action = setTimeout(function(evt){
                    if(onTapCallback != null && typeof onTapCallback == 'function'){
                        onTapCallback(evt);
                    }
                    clearTimeout(action);   // clear the timeout
                }, delay, [event]);
            }
            $(this).data('lastTouch', now);
        });
    };
})(jQuery);


and to use doubleTap event

$(selector).doubletap(
    /** doubletap-dblclick callback */
    function(event){
        alert('double-tap');
    },
    /** touch-click callback (touch) */
    function(event){
        alert('single-tap');
    },
    /** doubletap-dblclick delay (default is 500 ms) */
    400
);
于 2012-05-29T11:39:18.670 回答