I would like to be able to disable the iPad touch & hold functionality for everything on my site except for one image. I've managed to do this for all images using the:
event.preventDefault();
event.stopPropagation();
on touchstart & touchmove events, and this works great. But I haven't been able to work out how to allow this functionality for a particular image on my site.
Any help would be appreciated.
Cheers,
Helmut
OK I've worked out a way to do this. Basically I put a condition around those event statement, like this:
if (!saveImage)
{
event.preventDefault();
event.stopPropagation();
}
I only did this for those functions called at the touchstart event, as I didn't need to (or want to) prevent defaults for any other touch events. All I needed to do then was to set the saveImage Boolean appropriately so that it was only true when I was touching the image I wanted to save (which was pretty straight forward).
Related
I am working on Easel JS and came across one issue.
If I am adding Events to one easelJs element then how can I ignore the right-click and only listen to left-click?
Click should work on a primary key but it is also working for other keys also.
I have come across one scenario where pressUp of left-clicking is getting missed and that is creating an issue.
steps are as follows:
left mouseDown on the object.
right mouseDown on the same object.
right pressUp on the object.
If we follow this order, left pressUp is getting missed it is not getting fired nor it is present after that point. It's like it totally vanishes as if it never existed.
Can anyone please help me with this? Thank you in advance!!
I am kind confused with your question, but I think a easy way to ignore the right click event is to use event.preventDefault for contextmenu.
The preventDefault() method of the Event interface tells the user
agent that if the event does not get explicitly handled, its default
action should not be taken as it normally would be.
For example (you may not able to show the right click menu in the example):
document.addEventListener('contextmenu', function() {
event.preventDefault();
return false;
})
I have an app im building with phonegap.
I'm listening for touchstart/ touchend events to make it responsive.
Sometimes, the event listener for the touchend will fire, but then, for e.g, an input will focus afterwards as the click event is fired 300ms later.
an example is, i have a menu sidebar. each sidebar list item listens to the touchend event. on receiving the event, the sidebar closes and the relevant page is shown. however, if the relevant page contains a form element that is where the user had clicked for the sidebar list item, the form element will get focused.
what is the best way to stop this across the entire app? it happens in various scenarios which vary with different phones.
Ive tried things like stopPropagation etc but these only work ina few cases, and i need to have a generic cross-app solution rather than adding in for each function, if possible.
something like:
$('body').on('touchend', function(){
//stop any further touchends/ clicks from firing
//apart from the 1 i do want
})
You could try 'touchcancel' instead of 'touchend', see if it works :) good luck.
your app goes to fast ;)
EASY WAY:
just put a setTimeout(gotopage(),100)
on every button/menu action
HARD WAY:
If you really don't want to put a setTimeout, you should take a look to how bubbling works, problem is here
TIP:
Anyway to avoid the 300ms you should use the Fastclick of FTLABS :
https://github.com/ftlabs/fastclick
and the use click event, it will do the job for you (you will still have to use setimeout trick)
Im trying to figure this out like desperate but I couldn't come up with the right way.
Im trying to offer users the ability to change the background picture by drag-and-drop a picture into the browser. However, I can't be able to detect the drag events properly. when using
$(window).on 'dragenter', (e) =>
console.log e.target
$(window).on 'dragleave', (e) =>
console.log e.target
I always get the events triggered on individual DOM elements but never on the window/body itself, meaning if my DOM elements/container/wrapper dont cover the whole window, it does not work properly. I know it's possible since GMail can make it work somehow, but I seriously don't know what I'm doing wrong here.
Thanks!
If I'm interpreting your question correctly, you need to bind the events to $(document). Because of event propagation, everything should eventually bubble up to document. If you only want the dragging to work for a specific part of the page, try using classes/class selectors.
There is a lot of material/posts on ghost clicks and I'm trying to understand it better. So the way I understand it, the reason for ghost clicks is the click event being dispatched ~300ms after the touch event. jQuery Mobile suggests to not use their vclick event whenever there is any chance of changing the content underneath the finger position.
My first question would be: Does that mean ghost clicks will only fire if the element targeted by click is different from the one originally touched? So, say, I write a database entry when a button is touched – nothing else. Is there a chance of ghost clicking or not?
If this is the case, wouldn't that mean that I can prevent ghost clicks altogether if I simply use only tap events and no click events whatsoever?
My last question would be if I can simply tell the browser to not use the 300ms delay when using PhoneGap (which would instantly solve the problem), but I'd just guess that I can't do that as it's probably hard-coded into the browser.
The click event is delayed by 300 ms to detect things like double tap or fat finger mistakes.
Yes, wherever possible you should use the touch events instead.
Yes, there are many ways to enable fast clicks by doing a bit of JS. For instance:
https://developers.google.com/mobile/articles/fast_buttons
https://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile
http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
You don't have to live with the 300ms delay.
If everything on your page that can be clicked has the appropriate vclick jQuery event handlers installed, then one easy way of stopping ghost clicks is create a touchend event handler on the body and call preventDefault from it:
$(document.body).on('touchend', null, function(e) {
e.preventDefault();
});
Note that this will disable regular clicks from touches, so any conventional links or form inputs you have will stop working unless you add vclick handlers to them.
I'd like to detect if a drop down is expanded or not. I don't want to use extra event handlers for click/mouseover etc because the drop-downs are dynamic and for other reasons I can't use something like jQuery live. Basically I'd like something that can given an arbitrary select element (no other attached event handlers, classes, etc), can give a true/false answer on whether it is expanded or not.
For my specific application, I am handling mouse wheel events, but don't want to handle them when a drop down is open (which would override the browser default functionality). However, I still want to handle the mouse wheel events when the mouse has hovered over the select, but has not opened it.
I looked into this before, for similar reasons. I could never find a solution other than trying to track it manually which really doesn't work. There are several ways to open/close a select (drop down) such as Alt+Dn Arrow. An open select will close if the user clicks on something outside the browser. Trying to keep track of the state of the select is an exercise in futility. Unless someone else comes along with something I missed on my hunt, you'll have to code around it as elegantly as you can.
How about when it's got focus, even if it isn't expanded? You specifically ask for expanded because you don't want to override default browser behaviour, but the browser behaviour should be to scroll through the items when the item is focussed, even if it isn't expanded, so I would say you'd be better off detecting focus.
If you're okay with that, then you can certainly easily detect when a field has focus and when it loses it, by using the JQuery focus() and blur() methods, or focusin() and focusout().
http://api.jquery.com/focus/ and http://api.jquery.com/blur/
http://api.jquery.com/focusin/ and http://api.jquery.com/focusout/
Hope that helps.
Maybe you could do something like this:
$('#dropdown').live('click', function(){
//bind mousewheel here
});
$('#dropdown').live('change', function(){
//unbind mousewheel here
})