Question

好吧，可能是您看不到标题（问题），所以您什么都不懂。老实说，我无法为此问题定义问题。但是，我确信您会在看完我的示例后理解该问题。

input中有一个隐藏的div和一个form。在输入focusout时，将执行一些操作。单击submit按钮将完成另一组操作。

这是我的HTML：

$(document).ready(function () { 
    	$('#name').blur(function() { 
        console.log('blured');
        $('.message').show();
      });
      
      $('body').on('click', '.submitBtn', function () {
        console.log('click on Button');
      });
    })

.message {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <h1>Heading</h1>
  <div class="message">
    <p>
      Test Message
    </p>
  </div>
  <input type="text" name="name" id="name" />
  <button type="submit" class="submitBtn">Submit</button>
</form>

问题是：在输入中键入内容后，如果我单击“提交”按钮，则尚未触发click事件。是第二次点击触发的。

您可以看到消息click on Button尚未在控制台上打印。如果我再次单击submit按钮，则消息正在打印。

如果我禁用以下代码：//$('.message').show();，则一切正常。我不明白为什么会发生这个问题？

Fiddle Demo

Answer 1

这里的实际问题与事件本身不正确无关，而与事件发生的顺序无关。

当您专注于输入并单击按钮时，将按以下顺序有效地调用事件：input loses focus / blur，document receives "click"

还必须注意，单击本身的动作显然不会立即捕获有关单击了的信息，仅捕获发生在位置的信息，并且在这种情况下，具有焦点的元素失去了焦点，并在之前调用任何事件侦听器。

这意味着在“模糊”侦听器期间对文档所做的任何更改（例如，从文档中删除目标元素）都会在之前发生，其目标事件的单击事件侦听器称为-或甚至在浏览器将其注册为“目标”元素之前。

对于此问题，当输入字段失去焦点时，按钮上方的用display:none隐藏的内容块将用display:block显示，这会将包含按钮的内容向下移动到页面为其外观腾出空间，从而导致“点击”实际上是 miss 按钮。

下面的小提琴使用可见性属性而不是display来显示此问题的可行解决方案，以便保留隐藏消息占用的空间，而不是使内容一旦显示就四处移动，就UX而言，正确使用也是更好的做法： https://jsfiddle.net/sdhtmk90/

Answer 2

使用焦点而不是模糊

$('#name').focus(function() { 
    console.log('blured');
    $('.message').show();
  });

为什么您应该使用它？因为模糊事件在失去焦点时会发送到该元素。

因此，第一次点击输入=焦点

在单击输入=模糊后单击其他任何位置时

如果您需要在用户将光标从输入字段移开而不是在输入字段之外单击时执行操作，请按照以下步骤操作：

$('#name').focus(function() {
  $(this).mouseout(function() {
    console.log('blured');
    $('.message').show();})
  });

Answer 3

这是因为click事件要求mouseup在mousedown之后立即触发。但是在这里，当您单击button.submitBtn时，事件序列变为mousedown blur mouseup。因此，click事件从未第一次触发。因此，您可以尝试使用mousedown代替click，并将mousedown处理程序延迟一小段时间。

$('body').on('click', '.submitBtn', function () {
setTimeout(function() {
    console.log('click on Button');
},100);
});

在窗体中显示隐藏元素时，第一次触发模糊事件时未单击

3 个答案: