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

Question

我有一个附加到 touchstart 的事件处理程序，我想在 touchmove 发生后立即调用 preventDefault。我目前有这个代码。

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/

我在 touchmove 的事件处理程序中为 touchstart 调用 preventDefault。这似乎不起作用，因为总是调用 click 事件处理程序。

我在这里做错了什么？

Answer 1

当您调用 preventDefault 时，它适用于 touchstart 事件，而不适用于 click 事件。

您可以为链接对象添加一些属性来指示移动状态，并在点击处理程序本身中检查它（并通过preventDefault 或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);
});