andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.17k stars 401 forks source link

JavaScript error on mobile: Uncaught TypeError: Cannot read property 'clientX' of undefined #77

Closed nephix closed 10 years ago

nephix commented 10 years ago

Browser: Chrome (Mobile), Chrome (Desktop with Galaxy S4 Emulator turned on)

Steps to reproduce: 1) Open Chrome Developer Tools (CTRL+Shift+C) 2) At the bottom near Console click on Emulation 3) From the dropdown select "Samsung Galaxy S4" and click "Emulate" 4) Go to http://andreruffert.github.io/rangeslider.js/ 5) On the page drag the slider to the left

Expected: No javascript errors in the console

Actual: Uncaught TypeError: Cannot read property 'clientX' of undefined rangeslider.js:249 Plugin.getRelativePosition rangeslider.js:249 Plugin.handleEnd rangeslider.js:206 m.extend.proxy.m.isFunction.e jquery.min.js:2 m.event.dispatch jquery.min.js:3 m.event.add.r.handle jquery.min.js:3

In the code this is at

Plugin.prototype.getRelativePosition = function(node, e) { return (e.pageX || e.originalEvent.clientX || e.originalEvent.touches[0].clientX || e.currentPoint.x) - this.getPositionFromNode(node); };

When trying to access e.originalEvent.touches[0]

This causes my app not to work on mobile which is pretty unfortunate because your slider is awesome.

kantuni commented 10 years ago

Solution

Plugin.prototype.getRelativePosition = function(node, e) {
        var touch;
        if (e.originalEvent) {
            if (e.originalEvent.touches && e.originalEvent.touches.length) {
                touch  = e.originalEvent.touches;
            } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
                touch = e.originalEvent.changedTouches;
            }
        }
        return (e.pageX || e.originalEvent.clientX || ((touch) ? touch[0].clientX : false) || 
            ((e.currentPoint) ? e.currentPoint.x : false)) - this.getPositionFromNode(node);
    };
andreruffert commented 10 years ago

This issue should be fixed since the new release v0.3.2