时间戳

首页 > 解决方案 > HTMLElement.focus() 在 HTMLElement.onpointerdown 中不起作用

javascript - HTMLElement.focus() 在 HTMLElement.onpointerdown 中不起作用

问题描述

假设我有这个html文件

<!DOCTYPE html>
<html>
   <head>
       <script type="application/javascript" src="./jsfile.js" defer></script>
   </head>   
   <body>
       <p>some text</p>
       <input type="text">
   <body>
</html>

这个javascript文件叫做jsfile.js

let p=document.getElementsByTagName("p");
let input=document.getElementsByTagName("input");
p.onpointerdown=()=>{
   input[0].focus();
};

我在这里要做的是当在元素pointerdown上调用事件时<p>，输入元素会获得焦点。
我尝试了mouseclick事件并且它有效，但我无法让它在pointerdown事件中起作用。

标签： javascripthtml

解决方案

这里有几个问题：

  1. 您根本没有定义元素变量
  2. 您将获得一个元素列表（通过使用 document.getElementsByTagName）。在这种情况下，您将在p变量中获取项目集合，并且您不能在集合中使用 .focus 和其他内容（尽管在 jquery 中可能）

相反，你应该使用这样的东西：

// This will give you a single element
const p = document.querySelector("p");
// Same thing here
let input=document.querySelector("input");

p.onpointerdown = (e) => {
   // This part is necessary here to avoid default begaviour
   // Mose browsers would fire mousedown event if this event is not canceled, therefore it will affect your focus 
   e.preventDefault(); 

   input.focus();

};

推荐阅读