如何使用javascript转换鼠标事件和触摸事件答案

【问题标题】：how to convert mouse events and touch events using java script如何使用javascript转换鼠标事件和触摸事件
【发布时间】：2012-05-29 11:18:27
【问题描述】：

关于如何在平板电脑或 ipad 中使用双击事件的任何想法。就像 'onmousedown' 等价于 'touchstart'。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

还可以查看energize.js，它可以让这些点击事件更快

也类似于这个 stackvoverflow 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);
    });

});

【讨论】：

【解决方案4】：

老话题，但还没有标记为已回答，所以我想试试看。

在大多数情况下，向事件添加抽象层的 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);

【讨论】：

【解决方案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
);

【讨论】：

这是很棒的代码，但它说明了为什么他应该为此使用框架/库。为了抽象出不同平台的不同事件处理

【解决方案6】：

我试过这样的：

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

【讨论】：