CODEWITHSUNDEEP
javascripteventsmobile-safaricompatibility
Dylan Thepiguy
Dylan Thepiguy

Reputation: 43

iPad equivalent of onmousemove?

I'm trying to get a website to work on my iPad but the only thing that isn't working is the onmousemove method. I would like onmousemove to be triggered when the user pans their finger across the screen.

Upvotes: 0

Views: 1026

Answers (1)

Ian
Ian

Reputation: 50905

The equivalent of a mousemove event in a touch-enabled device is the touchmove event.

So you might bind the event like this:

var addEvent = (function () {
    var tester, allHandlers, attachGenerator, addFunc, removeFunc;

    tester = document.createElement("div");
    allHandlers = [];

    attachGenerator = function (el, cb) {
        var ret;
        ret = function (e) {
            e = e || window.event;
            cb.call(el, e);
        };
        return ret;
    };

    if (tester.addEventListener) {
        addFunc = function (element, eventName, callback) {
            allHandlers.push({
                element: element,
                eventName: eventName,
                callback: callback
            });
            element.addEventListener(eventName, callback, false);
        };
        removeFunc = function (element, eventName, callback) {
            element.removeEventListener(eventName, callback);
        };
    } else if (tester.attachEvent) {
        addFunc = function (element, eventName, callback) {
            var finalCallback;
            finalCallback = attachGenerator(element, callback);
            allHandlers.push({
                element: element,
                eventName: eventName,
                callback: finalCallback
            });
            element.attachEvent("on" + eventName, finalCallback);
        };
        removeFunc = function (element, eventName, callback) {
            element.detachEvent("on" + eventName, callback);
        };
    }

    addFunc(window, "unload", function () {
        var i, j, cur;
        // Don't remove this unload handler
        for (i = 1, j = allHandlers.length; i < j; i++) {
            cur = allHandlers[i];
            removeFunc(cur.element, cur.eventName, cur.callback);
        }
    });

    return addFunc;
}());

function loadHandler() {
    addEvent(document, "touchmove", touchmoveHandler);
}

function touchmoveHandler() {
    // this callback should fire for every pixel (or whatever unit they may use) the touch moves
}

addEvent(window, "load", loadHandler);

(the addEvent function is just a general event binding function to help work in old IE...probably unnecessary if you're binding to touch events)

Note that my original generic addEvent function isn't perfect: http://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html , but I modified what I used to use better support the availability of this inside the handler when attachEvent has to be used, and also to remove all handlers when the window's unload event occurs.

References:

Upvotes: 1

Related Questions