br0ken- / jtap

Tap Event for jQuery

jTap

Additional event for jQuery processing touching to screen on touch devices.

Those who are faced with adaptation of web-based applications for mobile devices knows that the event "click" is triggered with a delay of 300ms, observe which not very pleasant. In addition, click on non-delegated place of document will not work. To solve these problems and was designed by jQuery Tap Event.

Usage

Include the plugin file on the page:

<script src="jquery.tap.js"></script>

and set an event handler as follows:

$('selector').on('tap', handler);

Notes

• A noteworthy feature of plugin is a versatility. No matter where you use the tap event: on a device with a touch screen or on a desktop computer - the handler will be executed disparately.

• Triggering a click manually (e.g. $('.selector').trigger('click')) does not trigger a tap. Likewise, triggering a tap does not trigger a click. Adapt your code to match the event expected.

Changelog

Version 0.3.2, February 17, 2019:

• allow movement in a square of 10px;
• add the note about .trigger('click').

Version 0.3.1, February 7, 2016:

• fixed an issue when mousedown and mouseup events is triggering on mobile devices;
• plugin is available as NPM package now.

Version 0.3.0, January 31, 2016:

• fixed an issue #1: redesigned preventDefault handling.

Version 0.2.9, June 2, 2014:

• fixed an issue #2: undelegate event works incorrect.

Version 0.2.8, May 27, 2014:

• was removed the checking of "ontouchstart" in document, because newest versions of browsers contains this property in document for any format of the computer;
• the library was oriented for jQuery 1.6 or higher.

Version 0.2.7, March 17, 2014:

• added support of jQuery >= 1.4.x

Version 0.2.6, March 14, 2014:

• made the code refactoring;
• updated the license and demonstration.

Version 0.2.5, November 17, 2013:

• fixed an issue #1: method preventDefault doesn't worked, because the tap event constructed by mousedown/mouseup or touchstart/touchend events and they can not to be prevented.

Version 0.2.4, August 22, 2013:

• first public version.

Thank you

• @asakasinsky, for the bug report #1 - November 17, 2013.
• @egorogl, for the bug report #2 - May 29, 2014.
• @manchunw, for the bug report #1 - January 31, 2016.
• @commonpike, for the issues #7 and #8 - February 17, 2019.

Licence

jTap is licensed under the MIT license.

Links

• Demonstration: http://BR0kEN-.github.io/jTap/demo
• Plugin page: http://plugins.jquery.com/jTap
• Presentational publication (ru): http://habrahabr.ru/post/191078

jtap's Issues

Tapping re-taps element behind what was tapped

Tapping an element, i.e. a close button, causes the element behind it which is made visible by the close, to receive the tap event as well.

easily invalid

when after I touch，I just move a little bit，then it become invalid usually

e.preventDefault() not work

if i bind tap event on «a» link element, for example, e.preventDefault() not work.

triggering a click does not trigger a tap

.. and triggering a tap does not trigger a click either

This is probably as intended. But it may be useful to add that to the description, because people may simply replace all 'click' handlers ( $(foo).on('click'... ) with 'tap' handlers, forgetting that somewhere in the application someone may be triggering the event by code ( $(foo).trigger('click'... ), which has to be replaced too, then, into $(foo).trigger('tap'... )

easily invalid

referring to https://github.com/BR0kEN-/jTap/issues/4

code says, .on nativeEvent.end

// Coordinates, when event ends, should be the same as they were
// on start.
(
     eventData.pageX === eventData.event.pageX &&
     eventData.pageY === eventData.event.pageY
)

so your finger can not slip a pixel.
other libs use ~10px.

in effect, you get a pseudo-hover state on mobile without getting a tap event fairly often.

Can this be used reliably on desktop as well?

It would be great to have a unified solution for mobile (touch) and desktop (click). Can this be used?

undelegate

Я вешаю событие tap
$('body').delegate('.right', 'tap', fun);

как сделать undelegate ?

У меня сайт с ajax подгрузкой страниц и скриптов.

$('body').undelegate('.right', 'tap');
$('body').delegate('.right', 'tap', fun);
$('body').undelegate('.right', 'tap');
$('body').delegate('.right', 'tap', fun);

fun вызовет 2 раза

Tap Issues - have to double tap

Even with the online demo the first tap doesn't work sometimes. You have to tap again to trigger the tap. That has to be a bug because it's frustrating user experience.