You are not logged in.

Dear visitor, welcome to Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • "Douglas Rhiner" started this thread

Posts: 110

Location: Fairfax, CA

Occupation: Code-Slave

  • Send private message


Wednesday, December 14th 2016, 1:59am

Mobile click issue

I’ve created a plugin that loads a pure CSS accordion list into a layer via plugin.sprite.appendChild after the content is fetched via an AJAX call.
To actuate the accordion functionality I have a label-for-input(checkbox) relationship.

Here is a snippet of the code in question:

Source code

<li class="file">
<a href="#" onclick="'gotoprep(); loadpanoscene(scene_xml.php?tourid=102098&amp;sceneid=103889,scene103889,null,MERGE,BLEND(1));');">Greater LA</a>
<li><label id="the_97155_102200" for="97155_102200" onclick="">LAX</label> <input type="checkbox" id="97155_102200">


<li class="file"><a href="#" onclick="'gotoprep(); loadpanoscene(scene_xml.php?tourid=102098&amp;sceneid=110532,scene110532,null,MERGE,BLEND(1));');">LAX Aerial

<li class="file"><a href="#" onclick="'gotoprep(); loadpanoscene(scene_xml.php?tourid=102098&amp;sceneid=97172,scene97172,null,MERGE,BLEND(1));');">World Way


In a “desktop” environment this works perfectly.
However, in mobile Safari the label-for-input(checkbox) relationship "breaks". Meaning the onclick that should be firing when "touching" the label connected to the checkbox is not "checking" the checkbox. HOWEVER, all of the <a>-links still work as expected, receiving the onclick and the firing as expected.
Also when there is an overflow situation, the content should scroll. It does in desktop but not in mobile.

I've double checked to see if there was an errant event.preventDefault() somehow coming into play and could not find one.

What is odd is that if I switch out the empty onclick in the <label> tag to ontouchstart and add in debugging code, the ontouchstart will "work" and return the console.log while the same code in the onclick will just not fire.

Any ideas?