📜 ⬆️ ⬇️

jTap - event of a click for touch devices

jTap - tap event for jQuery

Hi % username% !

To begin with, with each new day a wave of mobile devices is increasingly covering people. And, as was custom, almost all new devices have a touch screen. But what can we say, now view your favorite social. the network is even possible with some refrigerators. The dominance of desktops — now it's like dinosaur tales — we hardly can see that.
')
In my opinion, the most significant invention in the world of web development, over the past few years, has become CSS media queries - they allow you to organize the look and feel of a web application so that it can differ radically at different screen resolutions. Any device form factor can have its own presentation of the design and that’s fine. We all know this, but it’s not about this, but about handling events ...

Why is jTap needed?


Interference when adapting the application for mob. devices, the fact that the touch screen does not have control events familiar to us. Having installed a handler for the type of the “click” event on the desktop computer and, for example, a tablet, we will not get the same result. Take the line of code for example:

$('element').click(handler); 

and imagine that the handler function should show us the menu. On the PC, everything will work flawlessly, but on the touchscreen - with a delay of ~ 300ms. For most people, this is not critical and someone, perhaps, will not even notice it, but for perfectionists like me - irritably.

That is why I wrote a plugin for jQuery, the full name of which is jQuery Tap Event .

What can a plugin?


Handle touch screen and only. His main goals are maximum simplicity and work without complaints.

Someone can argue and say that it is better to use already written extensions with a full set of events for touch devices. And he will be right in those cases where the project will require processing a wide range of events. But, often, when it comes to websites, a couple of types are enough: swipe and tap .

The practices I found either worked poorly, or did not work as they should, or did not work at all. I liked some of them, but they had five types of events that I didn’t need and, as a result, an impressive part of the extra code. This was the starting point for the development of its own version.

ps A remarkable feature of the plugin is its versatility. The tap event will work the same on both the PC and the touch screen device.

How to use?


“It's easier than steamed turnip”!

Connect the plugin file after jQuery with the following line:

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

It remains to say "Voila!" And install handlers where necessary. This is done like this:

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

Important: the “tap” method can and should be checked for existence as follows:

 $.isFunction($.fn.tap); 

and, for fault tolerance, proceed as follows:

 var clickEvent = $.isFunction($.fn.tap) ? 'tap' : 'click'; $('selector')[clickEvent](handler); 

But, nevertheless, it is better to simply use event delegation:

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

In conclusion...


That's all. The plugin is small and narrowly directed. I hope someone will be useful.

Finally, I will post the main links:


Thanks for attention.

Source: https://habr.com/ru/post/191078/


All Articles