4

ロングタップイベントを右クリックイベントに自動的に変換するにはどうすればよいですか? iPad のようなタッチ デバイスの多くは Web サイトで右クリックを行う方法を提供していないため、Web サイトのコードを調整する必要がないため、これは非常に便利です。

たとえば、次のコードは、マウスをサポートするデスクトップ ブラウザー用に設計されています。

<html>
    <head><title>Long tap to right click test</title></head>
    <body>
        <img src="dummy.png" oncontextmenu="alert('Hi!'); return false;" width="20" height="20" />
    </body>
</html>

目標は、コードを変更せずにロング タップ イベントを右クリック イベントに変換することです。(もちろん、いくつかの JavaScript をロードするだけです。)

https://github.com/furf/jquery-ui-touch-punch/が jQuery ウィジェットでのドラッグ アンド ドロップのサポートに対して同様のことを行っていることを確認した場合。ただし、このプラグインはロングタップをサポートしていません。

また、 http://code.google.com/p/jquery-ui-for-ipad-and-iphone/は実際に必要な変換を実行しますが、スクロールを妨げるため、スクロールのサポートが必要な通常の Web サイトでは役に立ちません。

どんな助けでも大歓迎です-ありがとう！

4

3 に答える 3

6

このタイプのイベントを処理する単純なプラグインを作成できます。これを longTap イベントと呼びましょう。例：

$.fn.longTap = function(options) {

    options = $.extend({
        delay: 1000,
        onRelease: null
    }, options);

    var eventType = {
        mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
        mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup'
    };

    return this.each(function() {
        $(this).on(eventType.mousedown + '.longtap', function() {
            $(this).data('touchstart', +new Date);
        })
        .on(eventType.mouseup + '.longtap', function(e) {
            var now = +new Date,
                than = $(this).data('touchstart');
            now - than >= options.delay && options.onRelease && options.onRelease.call(this, e);
        });
    });
};

明らかに、iPad の場合はmousedownandmouseupをtouchstartandに変更します。touchend

使用法: http://jsfiddle.net/dfsq/RZgxT/1/

于 2013-02-14T14:13:04.037 に答える
1

そのためにタイムアウトを使用できます。

var timeoutLongTouch;
var $mydiv = $j('#myDiv');

// Listen to mousedown event
$mydiv.on('mousedown.LongTouch', function () {
    timeoutLongTouch = setTimeout(function () {
        $mydiv.trigger('contextmenu');
    }, 1000);
})
// Listen to mouseup event
.on('mouseup.LongTouch', function () {
    // Prevent long touch 
    clearTimeout(timeoutLongTouch);
});
于 2013-02-14T14:04:35.890 に答える