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 */
});
});
Related
I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
My code ive setup for the document click is:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
Thanks
Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.
This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.
Unless you have a problem with:
$(document).on('click', function () { ... });
There is no need to change anything!
Previous information, updated to remove touch...
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.
touchstart or touchend are not good, because if you scroll the page, the device do stuff.
So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
can you use jqTouch or jquery mobile ? there it's much easier to handle touch events.
If not then you need to simulate click on touch device, follow this articles:
iphone-touch-events-in-javascript
A touch demo
More in this thread
To apply it everywhere, you could do something like
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});
As stated above, using 'click touchstart' will get the desired result. If you console.log(e) your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
do:
$(btn).on('click touchstart', e => {
your code ...
return false;
});
I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
My code ive setup for the document click is:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
Thanks
Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.
This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.
Unless you have a problem with:
$(document).on('click', function () { ... });
There is no need to change anything!
Previous information, updated to remove touch...
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.
touchstart or touchend are not good, because if you scroll the page, the device do stuff.
So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
can you use jqTouch or jquery mobile ? there it's much easier to handle touch events.
If not then you need to simulate click on touch device, follow this articles:
iphone-touch-events-in-javascript
A touch demo
More in this thread
To apply it everywhere, you could do something like
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});
As stated above, using 'click touchstart' will get the desired result. If you console.log(e) your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
do:
$(btn).on('click touchstart', e => {
your code ...
return false;
});
I am currently working on my website and am using the following code to flip a card on hover. However, I tested it on mobile and the card flips on touch but doesn't flip back on click out, only if i click another card. Does anyone know how or if I can adapt this code (or have a different code I could use?) to make this work on mobile. Thank you!
$('.card').hover(function() {
$(this).toggleClass('flipped');
});
hover() accepts a second (optional) parameter that gets run when you hover out
$('.card').hover(function() {
$(this).toggleClass('flipped');
},
function() {
$(this).toggleClass('flipped');
});
But on mobile devices hover() isn't a actual jquery mobile event it uses touch events internally so if it didn't work you might need to use touchstart and touchend events and bind on them
EDIT : touchstart is similar to click and touchend is similar to mouseup event on mobile .If you include jquery mobile you can do this
Snip 1
$(".card").on('touchstart',function() {
$(this).toggleClass('flipped');
});
This would be like a "toggle button" when you touch and release it would keep its state untill you do it again.Whereas this
Snip 2
$(".card").on('touchstart',function() {
$(this).toggleClass('flipped');
});
$(".card").on('touchend',function() {
$(this).toggleClass('flipped');
});
would behave like a "turbo button" the moment you release your touch it would revert back to its original state
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!
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