Javascript click vs onClick event behavior

[[email protected]]

Im having a weird issue that Im wondering if I can get some input on.

I have a chunk of Javascript code in the click event of a button control on a UX component. The javascript is pretty straight forward code that I know executes. However, Im noticing that it doesnt appear as if the same code is being executed each time. The current code has at least 3 alert statements in it, for debugging purposes. The alerts are the only statements currently in the code in this example that all display different string data. When running the UX from the desktop browser, on the first click, only the 3rd alert statement is displayed. if I click the button again, all three alerts are displayed (as expected). if I click a 3rd time, I get a repeat of the first click, and likewise on the 4th, I get a repeat of the 2nd. Running from a mobile browser, if I touch the button, I get all three alert statements displayed, as I expected based on what was coded. I know the click event is designed for mobile,specifically. If I move the statements to the onClick event, then they seem to fire consistently on the desktop.

Can anyone provide any insight as to why this might be?

[Davidk]

Re: Javascript click vs onClick event behavior

I'd bet there's more to this than meets the post. Can you post the code running in your click event?

[[email protected]]

Re: Javascript click vs onClick event behavior

I can, but can you think of anything that would cause code to not execute in the click event vs the onClick event on the desktop browser. In the mobile browser its fine. Why would there be a difference in the mobile browser vs the desktop browser.

Ill post the code in the morning.

[GGandhi]

Re: Javascript click vs onClick event behavior

the onClick event is designed for the desktop and it triggers DOM event and it sends in the requested javascript function.
touch event is designed for mobile that sends in touch event like start, move or end.
then came touch enabled laptops so the click event is designed as a bridge between these two environments, and detects the environment. and if mobile transforms (or touch enabled desktop/laptop) to touch event, if not converts to onClick event for compatibility between browsers in the desktop and the mobile. the eventlistener, when converting sends in what would have been fired by the DOM.
if someone is designing primarily for desktop, i think better stick with onClick event. and tell the touch enabled desktop people to use mouse instead.
it is possible the click event sends in one of the touch event like touch start, move or end - i do not know. and your result seem to replicate same sequence, again those i do not know.

[jgrannis]

Re: Javascript click vs onClick event behavior

I can, but can you think of anything that would cause code to not execute in the click event vs the onClick event on the desktop browser.

Something phonegap related maybe...

I don't have this all figured out but I bet if you wrap all your "click" code in:
setTimeout(function(){
// your code
},0);

you'll see more consistent behavior.

EDIT: I read too fast... I guess not phonegap related.

[[email protected]]

Re: Javascript click vs onClick event behavior

Thanks for the input. But as David suggested, there's more than meets the eye here.

This morning, I tried to create a new UX, just trying to isolate the example to see if I could duplicate the issue. So far, no go. So I expect its something related to the UX where Im having the issue. I may have to dig a bit deeper. The interesting part is that from the mobile browser, the code executes fine every time. its only in the desktop browser where the click event seems to be ignoring code and only in this one circumstance, which apparently, i dont entirely understand yet.