为什么我一点击输入就在android chrome上运行模糊功能？

我有一个文本输入和标签，包装在一个div中。当单击div包装时，一个类被添加到子标签中，使其稍微褪色。在“模糊”中，将删除该类。这在浏览器中运行良好，但在我的手机上，只要我单击输入，该类就会被添加，然后立即删除。为什么会这样

我的jquery如下所示：

// listen for taps
$('.inputWrap').on('touchend',function(e){

    $(this).children('input,textarea').focus();
    $(this).children('label').addClass('ready');

});

// hide the label altogether once typing begins    
$('input,textarea').on('keypress',function(){

    $(this).prev('label').hide();

});

// on blur, check if the input is empty, if so, show the label again 
$('input,textarea').on('blur',function(){

    if($(this).val() == '')
    {
        $(this).prev('label').show().removeClass('ready');
    }

});

---

如果您将“touchend”更改为单击，它在桌面和移动设备上工作正常，但这需要是一个触摸操作。

用div覆盖输入字段、捕捉触摸、应用css属性，然后在触发on blur事件时将其删除，这有什么意义？我希望它们发生得相对较快，结果是用户永远看不到的。理论上，当你点击标签时，它会关注输入。这会向标签添加一个样式，使其稍微淡出，这样用户就不会完全看不到字段的用途，以免忘记。只有在取消选择输入且未键入任何内容时，模糊功能才会启动，以便视觉效果恢复到默认状态。为什么不设置：聚焦状态使其淡出，而不是捕捉触摸事件，然后监听模糊事件，您只需返回原始css，不带：焦点状态属性。这似乎太简单，无法满足我对复杂性的自我破坏需求。