Android: click event issue #96

ehretf · 2013-05-05T12:52:26Z

Hello,

Thanks a lot for this widget it is very usefull and working great, except for one thing.
I'm using it on Android (official relaese on Google Nexus 4).

The issue concern the click event which is fired twice when javascript scripts related to the widget are loaded (no issue when I remove them).

I have made a little change to the exemple html file you provide with your library:

<title>iscrollview Demo</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<link href="stylesheets/1_3_1/jquery.mobile-1.3.1.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/demo.css" media="screen" rel="stylesheet" type="text/css" />

<script src="javascripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="javascripts/demo.js" type="text/javascript"></script>
<script src="javascripts/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="javascripts/iscroll.js" type="text/javascript"></script>
<script src="javascripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="javascripts/pull-example.js" type="text/javascript"></script>
</head>
<body>
<div class="list-demo-page" data-role="page">

  <div data-id="header" data-position="fixed" data-role="header" data-tap-toggle="false" data-transition="none">
    <h1>List</h1>
    <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal" style="margin-top:0;border-top:0;">
      <a data-role="button" data-theme="a" href="index.html" rel="external">1.0.1</a>
      <a data-role="button" data-theme="a" href="index_11.html" rel="external">1.1.2</a>
      <a data-role="button" data-theme="a" href="index_12.html" rel="external">1.2.1</a>
      <a data-role="button" data-theme="b" href="index_13.html" rel="external">1.3.1</a>
    </div>
  </div>

  <div data-iscroll="" data-role="content">

  <div data-role="collapsible" data-theme="b" id="QuoteHearder" data-inset="false">
        <h2>TOTO</h2>
        <ul id="QuoteKey" data-role="listview" data-theme="b" data-inset="true" class="quote-list"></ul>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>
      </ul>

  </div>

  <div data-id="footer" data-position="fixed" data-role="footer" data-tap-toggle="false" data-transition="none">
    <div data-role="navbar">
      <ul>
        <li>
          <a class="fastclick ui-btn-active ui-state-persist" data-ajax="false" data-href="index_13.html">List</a>
        </li>
        <li>
          <a class="fastclick" data-ajax="false" data-href="inset_13.html">Inset</a>
        </li>
        <li>
          <a class="fastclick" data-ajax="false" data-href="pull_13.html">Pull</a>
        </li>
        <li>
          <a class="fastclick" data-ajax="false" data-href="shortpull_13.html">Short</a>
        </li>
        <li>
          <a class="fastclick" data-ajax="false" data-href="form_13.html">Form</a>
        </li>
      </ul>
    </div>
  </div>

  </div>

When using this file with phonegap on Android, cliking on the collapsible listview rise two event and make the listview expands and collapses immediatly.

This list act normally when removing iscroll related javascript.

My tests revealed that using bind() cause two click event to be fired while jquery.on() give a normal single/unique click event. Jquery docs warn that bind() is deprecated since Jquery 1.7. Hope this give help on the present bug.

Thanks a lot for your help

Florent

The text was updated successfully, but these errors were encountered:

ehretf · 2013-05-05T15:58:30Z

In addition, when including iscroll.js only, click event are working normally, the issue come when including jquery.mobile.iscrollview.js.

Also, setting bindIscrollUsingJqueryEvents to true solve the issue but the scrolling is not working (I saw in the doc that this setting is experimental ...)

jtara · 2013-05-09T22:28:52Z

Hmm, don't know why there would be a difference between .bind() and .on().

The reason I don't use .on() is that I mean to keep this compatible with jQuery Mobile from version 1.0. And JQM 1.0 is usable with jQuery 1.6.4, which doesn't have .on() at all.

In jQuery 1.9.1, .live() is removed, but I don't use '.live() anywhere.

"Deprecated" means it will be removed in some future version. So, when '.bind() is actually removed, I will have to face that issue, I suppose with some conditional code that tests the jQuery version.

I do intend to add a PhoneGap (as well as Rhodes) demo in the near future. At that time, I'll take a look at this.

ehretf · 2013-05-10T16:35:01Z

Hi,

Thank you for your response. Yo uare right there is not difference from bind to on.
I have worked to fix this issue (sorry I didn't take the time to update this case).

This issue is in fact due to the Android's default browser which is used by Phonegap. Chrome in Android acts normally (I didn't test in other browser).

This issue is related to iscroll.js and I have raised an issue and also propose a workaround.

It make iscroll depending of jquery which is not acceptable for iscroll team (I totally agree) but can be interesting intersting in your case (as you script target jquery mobile + iscroll user) or for other users:

cubiq/iscroll#361 (comment)

Thanks a lot

Best Regards

Florent

davidpfahler · 2013-05-25T18:02:04Z

Has anyone tried v5 and looked if the issue is fixed there? Thanks for your contributions.

Hexodus · 2013-08-26T07:29:31Z

UPDATE
Warning! This doubleclick fix stopped to work on android 6+ and newer browsers. It prevents all click no matter if double or single clicks. Didn't figured out yet why.

I'm using this fix to avoid the double click behavior on android. Should be loaded before iscroll.js

//--------------------------------------------------------------------------------------------------------------
//
// Doubleclick fix for Androids 4.2x where a single tap results
// in a double tap | click
// Solution found here:
// http://stackoverflow.com/questions/14982864/phonegap-2-4-0-with-android-4-2-strange-double-click-behaviour
//
//--------------------------------------------------------------------------------------------------------------

last_click_time = new Date().getTime();
document.addEventListener('click', function (e) {
click_time = e['timeStamp'];
if (click_time && (click_time - last_click_time) < 500) {
e.stopImmediatePropagation();
e.preventDefault();
return false;
}
last_click_time = click_time;
}, true);

tripexito · 2014-11-07T14:09:58Z

@Hexodus thanks for the code, it works like a charm! ;)
I'm using JQM v1.4.0, iScroll v4.2 and Phonegap v3.4.0
Greetings!

Hexodus · 2016-04-25T19:03:16Z

@tripexito Please read my up update and the warning about this fix which started to cause much trouble in newer browsers.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android: click event issue #96

Android: click event issue #96

ehretf commented May 5, 2013

ehretf commented May 5, 2013

jtara commented May 9, 2013

ehretf commented May 10, 2013

davidpfahler commented May 25, 2013

Hexodus commented Aug 26, 2013 •

edited

Loading

tripexito commented Nov 7, 2014

Hexodus commented Apr 25, 2016

Android: click event issue #96

Android: click event issue #96

Comments

ehretf commented May 5, 2013

ehretf commented May 5, 2013

jtara commented May 9, 2013

ehretf commented May 10, 2013

davidpfahler commented May 25, 2013

Hexodus commented Aug 26, 2013 • edited Loading

tripexito commented Nov 7, 2014

Hexodus commented Apr 25, 2016

Hexodus commented Aug 26, 2013 •

edited

Loading