Question

我为移动网站编写了一些简单的jQuery代码。如果我触摸删除按钮，它将清除输入并聚焦在输入区域。但是，它会在focus()

之后自动聚焦

$(document).on('focusin', '#testInput', function() {
  console.log('in')
});

$(document).on('focusout', '#testInput', function() {
  console.log('out')
});

$(document).on('touchstart', '#deleteButton', function() {
  console.log('touchs')
  $('#testInput').val('').focus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wrap">
  <div class="title">
    <span>MOBILE TEST</span>
  </div>
  <div class="content">
    <input type='text' id="testInput" name="testInput" class="input_text">
    <button id="deleteButton" type="button" class="delete_button">x</button>
  </div>
</div>

Answer 1

为什么不使用tap事件？这是用户的标准互动。

您需要记住的是用户交互 从活动元素中夺走焦点。没有任何魔法背后的“事件触发”。最多，许多的顺序 touchstart，mousedown。 click，tap，依此类推...是取决于浏览器，需要一些怪癖才能正常工作跨浏览器。您还应该使用tap事件，因为例如，用户应该能够将手指从取消按钮，什么也不会发生。
除此之外，如果您绝对坚持使用touchstart和您的按钮就像一种图形输入，不需要单击或任何事件，请尝试执行此操作，看看它是否可以正常工作：
```
$('#deleteButton').on('touchstart', function() {
  $('#testInput').val('').focus();
  return false;
});
```

但是在您的示例中，您正在使用event delegation。读这个： What is DOM Event delegation?。

因此，如果您需要event delegation。还有必要停止事件冒泡：

$(document).on('touchstart', '#deleteButton', function(e) {
  $('#testInput').val('').focus();
  return false;
});
$(document).on('touchend', '#deleteButton', function(e) {
  return false;
});

最终，这是jQuery事件处理程序中有关return false的很好的解释：

event.preventDefault() vs. return false

聚焦后自动聚焦

1 个答案: