iScroll Input Button Broken

In our Mobile Web Applications we use iScroll to provide scrolling behavior.  The way it works is that iScroll takes all of the touch(mouse) events and converts them in to scrolling actions.

Unfortunately there is a problem with this when including some other controls that are also expecting to process the touch events.  In my case this is the input type=”button” which does not process the onClick event.  Other html fields including input, select, and textarea also exhibit this problem.  For instance:

<input type="button" onclick="return ShowItemInfo(2,0);" value="Details">

After searching, I found a couple of solutions that appear to relate to different versions of iScroll (we are using v4.2.4) which modify onBeforeScrollStart including this one under Issue 17 on the iScroll site:

// ORIGINAL
//            onBeforeScrollStart: function(e) { e.preventDefault(); },
// FIX:     Don't prevent the events for select input, and textarea.  Allows these inputs
//          to be used on iPad. 
            onBeforeScrollStart: function(e) {
                var target = e.target;
                while (target.nodeType != 1) target = target.parentNode;
                if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                    e.preventDefault();
            },

You can also configure onBeforeScrollStart without modifying by configuring the iScroll options.  I chose not to do this because we use iScroll in many parts of the application and it seemed safer to comment iScroll and fix it in one place instead of many.

References:

http://stackoverflow.com/a/10279215/86923

Leave a Reply

Your email address will not be published. Required fields are marked *