Toni Michel Caubet Toni Michel Caubet - 3 months ago 32
Javascript Question

iScroll wont let items be clicked

I am using iScroll4 and it's working great!

This are the functions I use to init, refresh and end iScroll:

function iniciarIscroll(){
/*En ie7 no lo usamos*/
if(!ie7){
$(document).ready(function() {
myScroll1 = new iScroll('nvl1');
myScroll2 =new iScroll('nvl2');
/*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
});
}
return false;
}

function refrescarIscroll(){
if(!ie7){
myScroll1.refresh();
myScroll2.refresh();
}
return false;
}


function terminarIscroll(){
if(!ie7){
myScroll1.destroy();
myScroll1 = null;
myScroll2.destroy();
myScroll2 = null;
}
return false;
}


The problem is it won't let
<a>
or
<input>
or anything to be clicked (or focused, I am not sure); also css :hover or :focus won't be applied; but it would fire events in javascript like

.hover() or .click()


Any idea how to solve this if posible?

Tak Tak
Answer

The author has commented that form compatibility is glitchy - it's a known issue and he's working on a fix for the next version. Someone else has commented in the forums:

As of v4.1.9, support for form fields is still under development. You can make radio buttons and checkboxes work by wrapping in a label (wrapping seems to work better possibly than using for="" syntax).

Links should be fine and work in the demos provided. You've commented out the e.preventDefault() call in your init script which is the usual culprit. Maybe the form compatibility issue is affecting links also?

As for the hover event, from what I can tell this should be activated when an element is tapped.

Hope that helps a little. Worst case scenario - scrap your code and start with a demo page from the project, adapt to your needs one line at a time and keep testing it. You'll soon know which modification breaks the intended behaviour.