We Keep Coding

How to respond to 'click' instead of 'swipe' on mobile in jquery?

I have this code, on a mobile page:
jQuery(document).ready(function($){
$('a').on('click touchend', function(e) {
/* Do something */
});
});
works fine, but on mobile devices it's called both for click on links and on swipe (that is touching the link, scrolling and lifting the finger). How can I modify this to be called only on click?
I tried 'tap', 'click' and doesn't seem to work, nor I can find a good list of all the possibile events fired on mobile...

jQuery(document).ready(function($){
$('a').on('vclick', function(e) {
/* Do something */
});
});

Firstly you must recognize mobile or pc after that decide which type of event use.
example how you can recognize device here

On mobile devices, it seems that the first click on a menu is taken as an hover instead of a click, so the solution in my case was
jQuery(document).ready(function($){
$('a').hover(function(e) {
/* Do something */
});
});

Is there a better way to handle a "hover" event on touch devices?

Is there a better way to handle a "hover" (this tapped, then effect active until something else is tapped) event on touch devices than using a global event handler to detect when the user taps something else?
For example, this code might work, but it relies on an event listener attached to the document body, so it's questionable performance-wise.
//note a namespace is used on the event to clear it without clearing all event listeners
$('myDiv').on('touchstart.temp', function () {
//do stuff
$('body').not(this).on('touchstart.temp', function () {
//undo stuff
$('body').not(this).off('touchstart.temp');
});
});

In the future you should be able to use the touchenter and touchleave events, which apply to specific elements.
$("myDiv").on("touchenter mouseover", function() {
// do hover start code
}).on("touchleave mouseleave", function() {
// do hover end code
});
But according to MDN, this is just a proposal which hasn't been implemented yet.
If you use jQuery Mobile, you can use the vmouseover and vmouseleave events, which simulate the mouse events on mobile devices.

The Javascript onmouseover and onmouseout events work just fine! :)
It won't work on mobile devices, but I believe you anticipated that.
Edit: I also noticed you included the JQuery tag. You could also use the JQuery hover method if it is to your liking.
i.e.
$('div').hover(function(){
$(this).css('background-color', 'red');
}, function(){
$(this).css('background-color', 'blue');
});
Example: https://jsfiddle.net/sofdz0s2/
As for hovering on all touch devices, it is not constant between all touch devices. Mine does not keep hovering after a tap. (I tried tapping on the div that changes and then on the green div, but it kept hovering after a tap.)
Edit 2:
As talked about in the comments, touchenter and touchleave are probably what you want.
I hope this helps!

JQ UI Draggable on iOS: initiating dragging in taphold-handler

In our app we want to drop from one list to over. Problem is, when there are many items in list - it's impossible to scroll when elements are dragable.
As workaround we want to disable drag-ability of elements and enable it only when user makes a long tap on an element.
$('li').bind('taphold', function (event, ui) {
console.log('taphold');
clearAll(); // clearing all other catched
$(this).addClass('catched')
$(this).draggable('enable');
});
here is jsfiddle https://jsfiddle.net/nrxaqc34/10/
So far it works, but user needs to tap once more in order to drag. And would be nice if user could start dragging right after long tap.
This answer here https://stackoverflow.com/a/9922048/582727 doesn't work on iOS.
Maybe someone has an idea.

Does it make sense to use delay option? http://api.jqueryui.com/draggable/#option-delay
$("li").draggable().draggable( "option", "delay", 2000);
Fiddle: https://jsfiddle.net/dob3uegj/
EDIT:
jqueryui-touch-punch (http://touchpunch.furf.com/) added to fiddle for smartphone simulations:
https://jsfiddle.net/dob3uegj/1/

Disable taphold default event, cross device

I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.

I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });

For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}

Javascript "Show/Hide", very simple, and Multiplatform/Browser

I need a script show/very simple and you can use css transition, was using the jquery below but it has a certain delay in mobile devices, and I can't use transitions with him, I'll use the script many times on my site, so I wanted something simple to keep the site and that works both in browser mobiles, and desktops.
Very Delay in Safari/ IE10 Mobile
$(document).ready(function(){
// show and hide menu top
$(".dropmenu").hide();
$(".dropbtn").show();
$('.dropbtn').click(function(){
$(".dropmenu").slideToggle(0);
});
});

For the "click" event to fire you need mousedown and mouseup an element, which on mobile browsers results in an 300ms delay.
If you go directly for touchstart it'll fire in no time :)
$(function(){
// show and hide menu top
$(".dropmenu").hide();
$(".dropbtn").show();
$('.dropbtn').on('touchstart click',function( e ){
if(e.type=='touchstart') $(this).off('click');
$(".dropmenu").slideToggle(0); // or use just .toggle();
});
});
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events