Question

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

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

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

});

没问题，但问题是如果我在手机上点击输入显示的同一个地方的按钮，那么该输入将被选中并准备输入。这是不需要的。这就像按钮被按下......或推动图层。我的桌面上不会发生此功能。

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

任何想法如何解决这个问题？移动浏览器“touchend”是否会对屏幕的这一部分做些什么？

以下是问题的解答： http://jsfiddle.net/m6BRP/2/

我还尝试将表单显示函数放在return函数中，以便show函数仅在hide函数完成后加载 - 但这没有任何效果。

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会加载，以便所有事件都能正常工作。通过隐藏表单，你确定没有任何东西可以“按下”按钮，虽然我不确定是什么原因造成的。最后，但是在超时的隐藏回调中显示表单，您确定只有在触摸事件结束且按钮消失后才会显示。

如果有效，请尝试消除一些复杂性......

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

单击Web应用程序中的按钮会显示按钮后面的输入，然后无意中关注输入

2 个答案: