Тушенд выстрелил до размывания

Question

Тушенд выстрелил до размывания

0

Я пытаюсь реализовать событие "tap", используя "touchhend". К сожалению, когда вы фокусируетесь на вводе, событие "размытия" ввода запускается после "touchhend".

Воспроизведение: вход фокуса => кнопка нажатия

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

Niels Steenbeek 03 окт. 2013, в 13:55

Источник

Теги:

javascript

jquery

touch

1 ответ

Ещё вопросы

Niels Steenbeek · Answer 1 · 2013-10-04T09-50-00.000Z

Событие 'touchhend' не является событием 'click'. Чтобы имитировать событие "щелчок", необходимо установить фокус, прежде чем делать логику щелчка. Ниже приведен код, чтобы сделать трюк. Не смотрите на глобалы, это просто идея. Также нет проверок на мультитач и т.д.

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