javascript - Touchend 在模糊之前触发

Question

我正在尝试使用“touchend”来实现“tap”事件。不幸的是，当专注于输入时，输入的“模糊”事件在“触摸结束”之后触发。

重现：焦点输入 => 点击按钮

$(body).append("<div id='abc'>" +
    "<input class='text' type='text'/>" +
    "<button href='#'>save</button>" +
    "</div>");
var $input = $("#abc").children("input");
$input.bind("blur", function () {
    alert("blur");
});
var $button = $("#abc").children("button");
$button.bind("touchend", function (event) {
    alert("touchend");
});

Answer 1

“touchend”事件不是“点击”事件。要模拟“点击”事件，需要在执行点击逻辑之前设置焦点。下面是做这个伎俩的代码。不要看全局变量，这只是想法。也没有检查多点触控等。

$(body).append("<div id='abc'>" +
    "<input class='text' type='text'/>" +
    "<button href='#'>save</button>" +
    "</div>");
var $input = $("#abc").children("input");
$input.bind("blur", function () {
    alert("blur");
});
var $button = $("#abc").children("button");
$button.bind("touchend", function (event) {
    if (!swipeDetected) {
        $button.focus();
        //Click logic here
    }
    alert("touchend");
});

var swipeDetected = false,
    startPos = null;
$(document.body).bind("touchstart", function (event) {
    swipeDetected = false;
    var touchEvent = event.originalEvent.touches[0];
    startPos = {
        pageX: touchEvent.pageX,
        pageY: touchEvent.pageY
    };
});
$(document.body).bind("touchmove", function (event) {
    var touchEvent = event.originalEvent.touches[0];
    if (Math.abs(startPos.pageX - touchEvent.pageX) > 10 || Math.abs(startPos.pageY - touchEvent.pageY) > 10) {
        swipeDetected = true;
    }
});