如何确保即使移动位置也能点击按钮答案

【问题标题】：How to ensure button is clicked even moving position如何确保即使移动位置也能点击按钮
【发布时间】：2014-08-20 13:47:10
【问题描述】：

见小提琴：http://jsfiddle.net/2fboubvs/5/

<input id="losefocus">
<div id="validationMessage">Text disappears when "valid"</div>
<div>
<button>Next</button>
</div>

JS：

$(function(){

    $('button').on('click', function(){
        alert('I was clicked');
    });

    $('#losefocus').on('change', function(){
        $('#validationMessage').hide();
    });
});

我有一个处于“错误”状态的文本输入，下面有一条验证消息。

我输入了正确的内容，当焦点仍在文本按钮上时，我单击了位于输入和验证消息下方的下一个按钮。

如果我点击按钮的低位，它不会触发点击，因为删除消息也会使按钮向上移动。

对此有什么解决方法？我想到的一种方法是稍微异步执行更改事件，以便首先单击按钮，然后更新值，然后删除消息。

然而，这将导致在单击处理程序中完成的任何输入值的读取，以便按钮使用输入的先前值。

另外：注意按钮：它似乎被激活了，在视觉上它得到“按下”或“激活”的外观，但点击事件没有被触发。

【问题讨论】：

删除文本后单击按钮没有任何问题。您在哪个浏览器中遇到问题？
如果你输入一些文本，把焦点留在文本框中，然后点击按钮的最底部，验证信息消失，屏幕回流，按钮移动，你失去点击.
Chrome 36。记住键入新文本很重要，不要让输入失去焦点并单击按钮底部。
一种选择是使用油门对 keydown 进行验证。这样当用户键入时屏幕会重新流动。 Fiddle here

标签： javascript html events

【解决方案1】：

您可以只在消息上使用可见性：隐藏，然后留下文本区域而不重排。

    $('#validationMessage').css("visibility","hidden");

【讨论】：

是的，我知道，我应该提到这不是一个理想的解决方案。错误消息可能不止一行。什么留下了太多的空白。
我一直发现动态回流并不是很好。考虑将您的错误放在框旁边、框旁边的按钮等。如果您必须进行隐藏 DOM 位的动态验证，也许考虑关键事件，因为它们会很快被触发？