Two onClick events fire when form uses iScroll

[NickWallbridge]

Hi,

I have run into a problem using your branch of jQtouch and iScroll (love the apple theme).

I can set up a form that has onClick events, say on a button. It works fine until I then add the handling for iScroll as per the main demo script. Scrolling works great with the header fixed, but now every onClick event fires twice.

I have been trying to track down why, but it is beyond me - if I remove the class="s-scrollwrapper contentwrap" then I lose the double events, but of course iScroll no longer works.

I have got completely stuck using a checkbox and cannot find any way to stop it immediately unchecking itself again.

Any help gratefully received.

Thanks

[NickWallbridge]

P.S. Problem only occurs on a real iPhone!

[thomasyip]

Are you really mean onClick event? Or, do you mean ("selector").bind("click", function()).

How about if you use "tap" instead? Can you post some code example?

[NickWallbridge]

Thanks for the quick response.

I am using onClick() in anchor tags like this:

                        <div class="buttonset right">
                          <a href="#" class="button" onClick="prevFence()">Prev</a>
                          <a href="#" class="button" onClick="nextFence()">Next</a>
                        </div>

prevFence() and nextFence() get fired twice.

Demo code on http://eventingedge.com/mobile/demo/index.html.

In the demo tapping "next" or "prev" in the "Normal" group will increase the count by two (should be one). Using the "OnChange" toggle will also double count and show the toggle flipping back to "off" (Although just occasionally you get get it to stick to "on".)

In the "Code Debounced" group I try to drop the extra event using a timer. This works for "next" or "prev" and the count only increase by one for the toggle, but note that the toggle still bounces back to "Off"! This happens even if there are no event handlers on the checkbox.

I haven't found a way to solve that last one.

If you run in desktop safari, everything works, so it must be some interaction of tap events between iScroll, jQTouch and the iPhone.

[NickWallbridge]

Have added bind events for Click and Tap.

"Click" still fires twice. "Tap" only fires once, which maybe a better fix than my code debounce. However, it doesn't solve the problem of the checkbox state flipping back, as this happens with no events.

[NickWallbridge]

Looks like this is a "known" iScroll 4 bug or at least a variant.Matteo says on the iScroll4 page "The followings are known issues I’m currently working on: Form fields compatibility"
There is a suggested "quick fix" from hellogerard and bengourley that seems to help:

On line 135 of iscroll.js:

if (e.target.tagName == "INPUT") {
return;
}

I did a quick test and this seems to solve the checkbox issue. Of course the buttons aren't inputs so the onClick still fires twice, but that can be got around with bind to 'tap' or my own debounce code.

A drawback is if you drag on the checkbox, the whole screen scrolls. I can probably live with that.

Demo on http://eventingedge.com/mobile/demo/index2.html

[thomasyip]

I might misunderstood your problem, but, I thought the 'INPUT' code might be related to another workaround: INPUT and iScroll compatibility because of native widget handle preventDefault() differently.

Can you please add to see if it works around the problem?

[NickWallbridge]

Hi Beedesk,

class="nofasttouch" fixes the onClick() events on the buttons, but does not fix the flip back on the "onoff" checkboxes. Have added to the end of the demo program so you can see. http://eventingedge.com/mobile/demo

By the way " useFastTouch: false" was set in the jQT instantiation.

Regards
Nick

-----Original Message-----
From: beedesk [mailto:reply@reply.github.com]
Sent: 07 June 2011 07:19
To: nick.wallbridge@gmail.com
Subject: Re: [jQTouch] Two onClick events fire when form uses iScroll (#26)

I might misunderstood your problem, but, I thought the 'INPUT' code might be related to another workaround: INPUT and iScroll compatibility because of native widget handle preventDefault() differently.

Can you please add to see if it works around the problem?

Reply to this email directly or view it on GitHub:
#26 (comment)

[thomasyip]

Sorry for the delay. Can you just set useFastTouch to true.

The only different is that it compensate the double-click. I probably should remove the option from my branch.

[NickWallbridge]

Sorry - I can't see any difference if I set "useFastTouch: true" in the jQTouch instantiation:

var jQT = new $.jQTouch({
icon: 'jqtouch.png',
icon4: 'jqtouch4.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
useFastTouch: true,
preloadImages: [
]
});

The checkboxes still bounce back to their original settings and get two onClick() events on buttons.

Regards
Nick

-----Original Message-----
From: beedesk [mailto:reply@reply.github.com]
Sent: 14 June 2011 07:59
To: nick.wallbridge@gmail.com
Subject: Re: [jQTouch] Two onClick events fire when form uses iScroll (#26)

Sorry for the delay. Can you just set useFastTouch to true.

The only different is that it compensate the double-click. I probably should remove the option from my branch.

Reply to this email directly or view it on GitHub:
#26 (comment)

[thomasyip]

I am sorry, I still couldn't find time on this bug.

One thing I realize from another discussion is that it might be a iScroll compatible issue.

My recommendation is not use scroll if you have input in a page. I implemented "dialog" facility to help it. Native iPhone app break up input into multiple page too. It is just good UI.

There are endless bugs around and <textarea> that inherited from iOS itself. It is why I disable iScroll on the form page altogether in my demo. Even if I fixed this one, I can almost guarantee you hit another one.

[NickWallbridge]

Hi Beedesk,

I understand and I have workarounds for my current issues.

Your help is much appreciated.

Regards
Nick

-----Original Message-----
From: beedesk [mailto:reply@reply.github.com]
Sent: 29 June 2011 00:48
To: nick.wallbridge@gmail.com
Subject: Re: [jQTouch] Two onClick events fire when form uses iScroll (#26)

I am sorry, I still couldn't find time on this bug.

One thing I realize from another discussion is that it might be a iScroll compatible issue.

My recommendation is not use scroll if you have input in a page. I implemented "dialog" facility to help it. Native iPhone app break up input into multiple page too. It is just good UI.

There are endless bugs around and <textarea> that inherited from iOS itself. It is why I disable iScroll on the form page altogether in my demo. Even if I fixed this one, I can almost guarantee you hit another one.

Reply to this email directly or view it on GitHub:
#26 (comment)

[dogoku]

see http://github.com/senchalabs/jQTouch/issues/253

for a discussion and a possible solution (if you like the approach i took)