javascript - Javaスクリプトを使用してマウスイベントとタッチイベントを変換する方法

Question

タブレットまたはiPadでダブルクリックイベントを使用する方法についてのアイデア。「onmousedown」のように「touchstart」と同等です。

Answer 1

マルチタッチジェスチャ用のhammer.jsライブラリも興味があるかもしれません: http://eightmedia.github.com/hammer.js/

Answer 2

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 3

古いトピックですが、まだ回答済みとしてマークされていないので、試してみようと思いました.

ほとんどの場合、イベントに抽象化レイヤーを追加する 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);

Answer 4

簡単なGoogle検索で問題が解決すると思いますが、簡単な答えは「はい」です。長い答えは、jQuery-mobile のようなフレームワークを使用する方が良いということです.

これらのクリックイベントを高速化するenergize.jsも調べてください

このstackvoverflowの回答にも似ています

Answer 5

私はこのようなことを試しました:

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

Answer 6

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