search

beedesk / jQTouch

jQT + actively maintained + exclusive features (iPad layout, iscroll, tons of css enhancements, page events, param passing between pages, radio button, grid, mail, improved page history management etc.)
http://bit.ly/beedesk-jqt
MIT License
72 stars 13 forks source link

Two onClick events fire when form uses iScroll #26

Open NickWallbridge opened 12 years ago

NickWallbridge commented 12 years ago

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 commented 12 years ago

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

thomasyip commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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: https://github.com/beedesk/jQTouch/issues/26#comment_1313882

thomasyip commented 12 years ago

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 commented 12 years ago

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: https://github.com/beedesk/jQTouch/issues/26#issuecomment-1364205

thomasyip commented 12 years ago

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