使用纯JavaScript捕获"tap"事件

Question

如何使用纯JS捕获用户的"tap"事件？不幸的是,我无法使用任何库.

Answer 1

click只需单击鼠标即可触发该事件.

在touchstart当屏幕被触摸时触发事件.

在touchend当触摸结束时触发事件.如果阻止默认操作,click则不会触发事件.

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

Answer 2

这不是我的代码,但我不记得从哪里得到它,成功使用.它使用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 3

还有touchstart,touchend和其他活动.您可以通过以下方式为它们添加事件侦听器:

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

有关您可以在MDN webstite上找到的本机DOM事件的更多信息.