单击 Web 应用程序中的按钮会显示按钮后面的输入，然后无意中将注意力集中在输入上

Question

我有一个按钮（div.button），后面有一个表单（隐藏）。单击按钮时，按钮隐藏，然后显示表单（按此顺序）例如：

$('.button').on('touchend',function(){

    $('.button').hide();
    $(form).show();

});

这没问题，但问题是，如果我在显示输入的同一位置点击手机上的按钮，则该输入将已被选中并准备好输入。这是不需要的。这就像按钮被按住......或推动层。我的桌面上没有此功能。

按钮位于 div 中（绝对定位）并位于表单上方（也是绝对定位），按钮具有更高的 z-index。

任何想法如何解决这个问题？移动浏览器“touchend”是否会在屏幕的那部分进行某种按住？

这是一个问题的 jsfiddle： http://jsfiddle.net/m6BRP/2/

我还尝试将表单显示函数放在返回函数中，以便显示函数仅在隐藏函数完成后加载 - 但这没有效果。

Answer 1

我认为 stopPropagation() 是你需要的：

$('#face').on('touchend',function(event){
    event.stopPropagation();
    $('#face').hide()
    $('#under').show();
});

http://jsfiddle.net/m6BRP/8/

我在手机上试了一下，以防万一，它对我有用。

Answer 2

看起来很冗长，但试试这个：

$(function () {
    var form = $('css-selector');
    form.hide();
    $('.button').on('touchend', function () {
        $(this).hide(function () {
           form.show();
        });
    });
});

通过将整个内容包装在 $() 中，您知道 dom 在附加事件之前加载，因此所有事件都可以工作。通过隐藏表单，您可以确定按钮下方不会“流血”，尽管我不确定是什么原因造成的。最后，但是在带有超时的隐藏回调中显示表单，您可以确定它仅在触摸事件结束并且按钮消失时才显示。

如果可行，请尝试消除复杂性...

/** 编辑：删除了多余的超时 **/