android detect touchstart on prototype js

Question

i'm trying to make a magento extension work on android mobile devices. I bought this extension :

http://ecommerce.aheadworks.com/magento-extensions/layered-navigation.html

to get ajax layered navigation. It works well, but when it comes to android compatibility i get an issue on the range selector (slider selector, used for price range).

The feature works well on all device (ios included), but on android, i always got NaN instead of numbers values on the range selector. After digging the plugin's code, i found the origin in the javascript :

startDrag: function(event) {
    var isLeftClick = Event.isLeftClick(event);
    if (Prototype.Browser.IE) {
        var ieVersion = parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5));
        if (ieVersion > 8) {
            isLeftClick = event.which === 1;
        }
    }
    if (isLeftClick || event.type === 'touchstart') {
        if (!this.disabled){
            this.active = true;

            var handle = Event.element(event);
            var pointer  = [Event.pointerX(event), Event.pointerY(event)];
            var track = handle;
            if (track==this.track) {
                var offsets  = Position.cumulativeOffset(this.track);
                this.event = event;
                this.setValue(this.translateToValue(
                    (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
                ));
                var offsets  = Position.cumulativeOffset(this.activeHandle);
                this.offsetX = (pointer[0] - offsets[0]);
                this.offsetY = (pointer[1] - offsets[1]);
            } else {
                // find the handle (prevents issues with Safari)
                while((this.handles.indexOf(handle) == -1) && handle.parentNode)
                    handle = handle.parentNode;

                if (this.handles.indexOf(handle)!=-1) {
                    this.activeHandle    = handle;
                    this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
                    this.updateStyles();

                    var offsets  = Position.cumulativeOffset(this.activeHandle);
                    this.offsetX = (pointer[0] - offsets[0]);
                    this.offsetY = (pointer[1] - offsets[1]);
                }
            }
        }
        Event.stop(event);
    }
}

this line :

var pointer  = [Event.pointerX(event), Event.pointerY(event)];

return a correct array of value (mouse coordinates) on all devices, except on android, where i get NaN. Is this a known bug of prototype.js, and can I bypass it ?

thanks,

Answer 1

Problem solved by digging the event object, then manually retrieving the X and Y pos (tested clientX, screenX and pageX) :

var pointer  = [Event.pointerX(event), Event.pointerY(event)];
            if(navigator.userAgent.match(/Android/i)){
                pointer  = [parseInt(event.targetTouches[0].clientX),parseInt(event.targetTouches[0].clientY)];
            }