What is the iPad version of the onmousemove event?

Question

What is the iPad version of the onmousemove event?

I am currently facing an issue with a website on my iPad. Everything seems to be in order except for the onmousemove method. I am looking for a way to have onmousemove activated when the user swipes their finger across the screen.

javascript events mobile-safari compatibility

Answer 1

Answer №1

When using a touch-enabled device, the equivalent of a mousemove event is the touchmove event.

To bind the event, you can do so in the following way:

var addTouchMoveEvent = (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;
        // Do not 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 loadTouchMoveHandler() {
    addTouchMoveEvent(document, "touchmove", touchmoveHandler);
}

function touchmoveHandler() {
    // This callback should be triggered for every pixel the touch moves
}

addTouchMoveEvent(window, "load", loadTouchMoveHandler);

(the addTouchMoveEvent function is a general event binding function specifically for touch events, eliminating the need for old IE compatibility)

It's important to note that the original generic addTouchMoveEvent function may not be perfect. Here is a helpful resource for further information: http://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html. I have made modifications to better support the availability of this inside the handler when attachEvent is necessary, as well as removing all handlers when the window's unload event occurs.

For more information, please refer to the following resources:

Answer 2

When using a touch-enabled device, the equivalent of a mousemove event is the touchmove event.

To bind the event, you can do so in the following way:

var addTouchMoveEvent = (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;
        // Do not 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 loadTouchMoveHandler() {
    addTouchMoveEvent(document, "touchmove", touchmoveHandler);
}

function touchmoveHandler() {
    // This callback should be triggered for every pixel the touch moves
}

addTouchMoveEvent(window, "load", loadTouchMoveHandler);

(the addTouchMoveEvent function is a general event binding function specifically for touch events, eliminating the need for old IE compatibility)

It's important to note that the original generic addTouchMoveEvent function may not be perfect. Here is a helpful resource for further information: http://www.quirksmode.org/blog/archives/2005/08/addevent_consid.html. I have made modifications to better support the availability of this inside the handler when attachEvent is necessary, as well as removing all handlers when the window's unload event occurs.

For more information, please refer to the following resources:

What is the iPad version of the onmousemove event?

Answer №1

Similar questions

Is there a way to upload a kml file to Google Maps using my website or by using JavaScript commands?

Utilizing Semantic-UI-React and Webpack to Set the Path for an Image

Using optional arguments in my AngularJS controller.js

The Johnny-Five stepper initiates movement within a for-loop

What is the reason behind the image not displaying before the AJAX request is initiated and then disappearing once the request is completed?

What is the best way in Javascript to retrieve and process multiple stream chunks from a single API request using the fetch() method

Having trouble retrieving POST data with the Webextensions API

IE8 does not support Jquery ajax() for cross domain requests to remote servers

Preventing Past Dates from Being Selected in JQuery Date Picker

Accessing a JSON string correctly using JavascriptSerializer in JavaScript

jQuery ensures that the show and hide features happen instantly

Acquiring information from a different Vue.js component

I encountered an Angular error that is preventing me from updating and uploading images to my Firebase Storage because it is unable to locate the storage bucket

Error: Attempting to subscribe to a post request returned a null result

Issue with AJAX/Javascript functionality

Learn how to easily set a radio button using Angular 4 and JavaScript

Creating custom modals for individual elements using PHP

Selecting options using AngularJS to parse through a list

Having trouble with fs.readFile in Node.JS on Ubuntu?

Is there a way to transfer the getJSON output into an input field?