Touchend가 블러되기 전에 실행되었습니다.

Question

'touchend'를 사용하여 'tap'이벤트를 구현하려고합니다. 불행하게도 입력에 초점을두면 'touchend'다음에 입력의 'blur'이벤트가 시작됩니다.

재현 : 입력 포커스 => 버튼을 눌러

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