How to solve vmouseup being interrupted - javascript

I'm using jQuery Mobile to develop one single page to use in Android Webview.
There is an button which I need put some pressed effect, and then I use vmousedown to add press style class and vmouseup to remove the class added before. However, there are something interrupt the vmouseup process.
Reproduce:
First, press one button, and it trigger the vmousedown event.
Then, keep hold your finger and move outside the trigger area.
Finally, loosen your finger and you will see it keeps the state that you hold it.
I have done a demo to test, and find that it even won't trigger vmouseout or vmousecancel, the last event have been triggered is vmousedown.
Is there anyone know why this happen and how to solve this?
This is code : Fiddle

When I written an example to test gesture event, I noticed that, the taphold event will be triggered and then I put it in on method and this problem fixed.

Related

React onClick event suppressed while dropdown is open

I have created a codesandbox to demonstrate the problem:
https://codesandbox.io/s/cocky-wu-mibxl
For some reason the onClick event handler on the link that comes after the dropdown, is not triggered while the dropdown is open and I have no idea why. I hope you can help me out here.
mousedown event happens a lot before the click / mouseup usually (>50ms) and in this case the dom has changed and the element that you clicked is not in the place where you started the clicking (mousedown) and does not receive the click event. You could add a timeout to the useOnClickOutside cb call but that is very unreliable.
Javascript is a single threaded language. So to get the <Dropdown> list to close, you need to close the alert() box first. The closest you will get is the work around in the comments, or you can change the action of clicking the link to OnMouseUp rather than OnClick. Either way, you will still need to close the alert box for execution to continue.

Prevent automatic triggering of a click event on client side using the console window

Clicks on any HTML element can be triggered merely by using the jQuery function .trigger("click") on any selected element. Automating this click triggering can cause a problem when time taken to perform the click matters, for ex: Time based game.
How do I stop the automatic triggering of the click event that can be done using the developers tools (the console window)?
Alternatively,
How do I differentiate between a click made by a user and a click triggered from the console window?
Thanks for the help.
If the person simulating the click does it carefully enough, you can't.
If they just use $(/*...*/).click(), it's easy: A real click event will have properties for the mouse position (pageX and pageY), one created using $(/*...*/).click() won't.
But it's fairly easy to create an event that has those properties, so that would only weed out incompetent cheaters rather than all of them.

listening for touchend sometimes fires click event mobile

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)

Using emit to trigger an EnhancedGrid event

It seems there is a bug in the dojox.grid.EnhancedGrid. The "onApplyCellEdit" is not triggered on editing a cell and then clicking Ok button in IE browser. Here is a jsfiddle,
http://jsfiddle.net/eZVkA/3/
As you can see, when you edit the cells in second column and then click on the button (without pressing enter or clicking on the grid), the "onApplyCellEdit" is triggered in all the browsers except IE. I presume this is a bug.
I am trying to resolve this by using emit function but not sure how to use it properly. I wish to use emit on click event of the button and trigger the "onApplyCellEdit" of the EnhancedGrid.
Any solutions?
You do not need emit but it is a good function to learn though.
http://dojotoolkit.org/reference-guide/1.9/dojo/on.html
by calling grid.edit.apply(); it will trigger the event. Grid is referring to the widget itself.

Ghostclicks in mobile apps

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.

Categories

Resources