Prevent click events on links but allow touch events - javascript

Im using hammer.js for gestures in a html5 app, also on phonegap.
I want to prevent normal clicks of links to go to the link, but I want t tap event to let the link pass. Im trying this sofar, but it prevents both events, I guess the click events comes first
$(document).hammer().on("tap click", "a", function(e){
if e.type == "click"
return false
}
I want to do this because I have a hold event, and after the hold is done over a link, the link is fired. I dont want this to happen..

listen for
$(document).on('touchend',function(e){
/*
you code here
*/
e.preventDefault();
e.stopPropagation()
});

Related

.addEventListener('click', classToggle) not working on touch devices [duplicate]

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;
});

dropdown menu not working on mobile, document click not triggered [duplicate]

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;
});

Detect link click event in chat window

I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg
Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});
You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});

Avoid 2-finger scroll to trigger back/forward

I'm trying to find a way to avoid triggering the back/forward in the browser when the user uses a 2-finger scroll (eg: OSX).
just like this:
https://tweetdeck.twitter.com
Mobile devices are notoriously annoying for handling touch events. However, if you return false or preventDefault() on a DOM touch event you will prevent the browser from scrolling/zooming/navigating.
The below example will prevent all touches from executing default behavior; meaning link touches won't register, scrolling won't work etc.
$("body").on("touchstart", function(e){
e.preventDefault();
});
The following will prevent default functionality of multi touch.
$("body").on("touchstart", function(e){
if (e.originalEvent.touches.length == 2) {
e.preventDefault();
}
});
If you need to allow the user to click links, you would do something along the lines of the following.
$("body").on("touchstart", function(e){
if (e.target.tagName != "A") {
e.preventDefault();
}
});

How to trap "open in a new tab" clicks in jquery.click

I have a jquery script that attaches a click event to every link, running an action when the link is clicked. This has been working great, but I just got some betatester feedback that's foiling me.
The user was right-clicking on the link and opening it in a new tab. When she did this, jquery didn't trap the click. BAD USER. I reproduced this with cmd-click as well.
Is there a way to trap these gestures, or this an inherent limitation?
So you want to capture every click? Event the right or middle one? Shouldn't the mousedown event do just that?
Of course, she could right click a link just to "Copy Link Location"...
See if you can somehow make use of jQuery rightclick plugin:
http://abeautifulsite.net/notebook/68
Usage:
$(document).ready( function() {
// Capture right click
$("#selector").rightClick( function(e) {
// Do something
});
// Capture right mouse down
$("#selector").rightMouseDown( function(e) {
// Do something
});
// Capture right mouseup
$("#selector").rightMouseUp( function(e) {
// Do something
});
// Disable context menu on an element
$("#selector").noContext();
});
As for the cmd-clickie bit, I'm really not sure. In case it's helpful, here's the jQuery hotkeys plugin:
http://www.webappers.com/2008/07/31/bind-a-hot-key-combination-with-jquery-hotkeys/
I've seen jquery.rightclick.js code in firebug. There are modifiers with the mousedown and mouseup event like:
altKey
ctrlKey
so you can use these two modifiers:
if(evt.altKey || evt.ctrKey)
in jquery.rightclick.js

Categories