时间戳

首页 > 解决方案 > 无法在触摸事件中聚焦 DOM 元素

javascript - 无法在触摸事件中聚焦 DOM 元素

问题描述

当我input.focus()从触摸事件侦听器调用时，它会将输入聚焦几毫秒，但焦点会立即返回到被触摸的元素。我也在我的手机（真正的触摸设备）上进行了测试，行为是一样的。我试图用谷歌搜索一些关于此的文档，但没有发现任何有用的东西。

我使用的唯一当前解决方法是setTimeout(() => input.focus(), 500)，这是一种非常草率的方法。有任何想法吗？

https://codepen.io/xpuu/pen/BXpBZY

document.addEventListener("DOMContentLoaded", function() {
  let input = document.getElementById("test");

  let events = {
    click(e) {
      console.log("click");
      input.focus();
    },
    touchstart(e) {
      console.log("touchstart");
      input.focus();
    },
    touchend(e) {
      console.log("touchend");
      input.focus();
    },
    touchprevent(e) {
      console.log("touchprevent");
      e.preventDefault();
      input.focus();
    },
    touchtimeout(e) {
      console.log("touchtimeout");
      setTimeout(() => input.focus(), 500);
    }
  };

  let buttons = document.getElementById("buttons");
  let validEvents = ["click", "touchstart", "touchend"];

  Object.keys(events).forEach(key => {
    let handler = key;
    let btn = document.createElement("button");
    btn.innerText = key;
    if (!validEvents.includes(handler)) {
      handler = "touchstart";
    }
    //console.log(handler, key);
    btn.addEventListener(handler, events[key]);
    buttons.appendChild(btn);
  });
});
input {
  padding: 3px;
}
<p>Enable devtools / responsive mode and touch emulation for this to work</p>
<input id="test" value="focus me please">
<p id="buttons"></p>

标签： javascriptdomtouch

解决方案

正如 Chris 所提到的，您必须先运行e.preventDefault()，然后才能集中输入。在选项中禁用passive处理程序也很重要。addEventListener

let touchprevent = e => {
  console.log("touchprevent");
  e.preventDefault();
  input.focus();
}
input.addEventListener('touchstart', touchprevent, { passive: false });

推荐阅读