javascript - 純粋なJavaScriptで「タップ」イベントをキャプチャする

Question

純粋なJSでユーザーの「タップ」イベントをキャプチャするにはどうすればよいですか？残念ながら、ライブラリは使用できません。

Answer 1

イベントは、clickマウスクリックとタッチクリックでトリガーされます。

画面がタッチされると、touchstartイベントがトリガーされます。

タッチが終了すると、touchendイベントがトリガーされます。デフォルトのアクションが防止されている場合、clickイベントはトリガーされません。

http://www.w3.org/TR/touch-events/

Answer 2

touchstart、touchendおよびその他のイベントがあります。次の方法で、イベントリスナーを追加できます。

var el = document.getElementById('test');
el.addEventListener('touchstart', touchHandler);

MDNWebstiteで見つけることができるネイティブDOMイベントに関する詳細情報。

Answer 3

これは私のコードではありませんが、どこから取得して正常に使用されたかを思い出せません。jQueryを使用しますが、タップ処理自体に追加のライブラリやプラグインは使用しません。

$.event.special.tap = {
    setup: function(data, namespaces) {
        var $elem = $(this);
        $elem.bind('touchstart', $.event.special.tap.handler)
             .bind('touchmove', $.event.special.tap.handler)
             .bind('touchend', $.event.special.tap.handler);
    },

    teardown: function(namespaces) {
        var $elem = $(this);
        $elem.unbind('touchstart', $.event.special.tap.handler)
             .unbind('touchmove', $.event.special.tap.handler)
             .unbind('touchend', $.event.special.tap.handler);
    },

    handler: function(event) {
        event.preventDefault();
        var $elem = $(this);
        $elem.data(event.type, 1);
        if (event.type === 'touchend' && !$elem.data('touchmove')) {
            event.type = 'tap';
            $.event.handle.apply(this, arguments);
        } else if ($elem.data('touchend')) {
            $elem.removeData('touchstart touchmove touchend');
        }
    }
};

$('.thumb img').bind('tap', function() {
    //bind tap event to an img tag with the class thumb
}

私はこれをiPad専用のプロジェクトに使用したので、デスクトップとタブレットを一緒に使用するには微調整が必​​要になる場合があります。

Answer 4

自分で小さなスクリプトを書きました。純粋なJSではありませんが、私にとっては問題なく動作します。スクロール時にスクリプトが実行されないようにします。つまり、スクリプトは「タップ」イベントでのみ起動します。

$(element)
        .on('touchstart', function () {
            $(this).data('moved', '0');
        })
        .on('touchmove', function () {
            $(this).data('moved', '1');
        })
        .on('touchend', function () {
            if($(this).data('moved') == 0){
                // HERE YOUR CODE TO EXECUTE ON TAP-EVENT
            }
        });