Touchend уволен до размытия

Question

Я пытаюсь реализовать событие '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"); 
}); 

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