how to convert mouse events and touch events using java script

Question

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

Answer 1

也许多触摸手势的Hammer.js库也会引起您的兴趣： http ://eightmedia.github.com/hammer.js/

Answer 2

I guess a quick google search would solve your problem, the short answer is yes there are. the long answer is you better of using a framework like jQuery-mobile can handle that for you, giving you ontouch, scroll etc events..

also look into energize.js that make those clicks events faster

also similiar to this stackvoverflow answer

Answer 3

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

});​

Answer 4

Aged topic, but not marked as answered yet, so I thought I'd give it a shot.

For most cases, a JavaScript framework that adds an abstraction layer to the events would help. (As others have pointed out.) But for the cases where you can't, try this.

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

Answer 5

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

Answer 6

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