Question

我正在尝试使用'touchend'来实现'tap'事件。不幸的是，当关注输入时，输入的'blur'事件在'touchend'之后被触发。

重现：焦点输入=＆gt;点按按钮

$(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;
    }
});

Touchend在模糊之前解雇了

1 个答案: