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

score 4 · Answer 1 · answered Jun 01 '12 at 12:09

4

maybe the hammer.js library for multi-touch gestures could interest you too: http://eightmedia.github.com/hammer.js/

answered Jun 01 '12 at 12:09

chaenu

1,915
16
32

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

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

edited May 23 '17 at 10:28

Community

1
1

answered May 29 '12 at 11:36

alonisser

11,542
21
85
139

score 1 · Answer 3 · answered May 30 '12 at 09:18

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

});

score 1 · Answer 4 · answered Feb 27 '13 at 10:21

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

score 0 · Answer 5 · answered May 29 '12 at 11:39

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

this is gread code, but it demonstrates why he should use a framework/library for ths. in order to abstract the different event handling in different platforms — alonisser, May 29 '12 at 13:08

score 0 · Answer 6 · edited Jun 01 '12 at 12:04

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

how to convert mouse events and touch events using java script

6 Answers6