如何防止来自事件B处理程序的事件A的默认值

Question

I have an event handler attached to touchstart and I want to call preventDefault as soon as touchmove occurs. I have this code currently.

link.addEventListener("click", function () {
    console.log("clicked");
});

link.addEventListener("touchstart", function (touchStartEvent) {
    var mouseMoveHandler = function () {
        console.log("moved.");

        touchStartEvent.preventDefault(); // This does not work.
        link.removeEventListener('touchmove', arguments.callee);
    };

    link.addEventListener("touchmove", mouseMoveHandler);
});

http://jsfiddle.net/682VP/

I'm calling preventDefault for touchstart within an event handler for touchmove. This does not seem to work because the click event handler is always invoked.

What am I doing wrong here?

Answer 1

When you call preventDefault it works for touchstart event, not for click event.

You can add some property for the link object indicating the moving state and check it inside click handler itself (and stop it either by preventDefault or return false )

var link = document.getElementById("link");

link.addEventListener("click", function () {
    if (this.moving) {
        this.moving = false;
        return false;
    }
    console.log("clicked");
});

link.addEventListener("touchstart", function (touchStartEvent) {
    var mouseMoveHandler = function () {
        console.log("moved.");
        this.moving = true;
        link.removeEventListener('touchmove', arguments.callee);
    };

    link.addEventListener("touchmove", mouseMoveHandler);
});