Touchend在模糊之前發射了

Question

我正在嘗試使用'touchend'實現'tap'事件。不幸的是，當專注於輸入時，輸入的'模糊'事件在'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) { 
    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; 
    } 
});