HTML with event.preventDefault

Question

If the html document is disabled. (no scrolling...)

document.ontouchmove = function(event){ event.preventDefault(); }

Can I selectively enabled elements in the html document? such as a div, span What javascript should I use to do that?

Answer 1

Here’s a fairly hacky solution.

Change your touchmove handler as follows:

document.ontouchmove = function (event) {
    if (!event.elementIsEnabled) {
        event.preventDefault();
    }
};

Then for an element that you want to enable:

element.ontouchmove = function (event) {
    event.elementIsEnabled = true;
};

This works because:

• When a touchmove event is fired on the element, both of these event handlers handle the event in the bubbling phase. This means that the element touchmove handler fires first, because it is closest to the source of the event.
• When two event handlers handle the same event, they receive the same event object.
• You’re allowed to set your own arbitrary properties on an event object.

So, the element touchmove handler just sets a custom property on the event object, and then the document touchmove handler checks for that custom property to determine whether the default action should be prevented.