在以编程方式单击之前必须手动单击搜索按钮

Question

我正在尝试创建一个简单的 JS 函数，用于在 youtube 上搜索给定的字符串并返回第一个结果。我计划在打开 YouTube 的选项卡的控制台中运行它。这是我的代码

const fetchLink = ()=>{
    allInputs = document.getElementsByTagName("input")
    allInputs[0].value="Live Fast"
    
    // Fetch button
    document.getElementById("search-icon-legacy").click()
}

我在浏览器中打开 youtube.com，我将这个函数放在控制台中并调用它。它确实将值放入搜索框中，但第一次不会调度单击事件。现在，如果我手动单击搜索按钮，它就会进行搜索，之后代码就可以正常工作，包括这一行。

// Fetch button
document.getElementById("search-icon-legacy").click()

无法理解为什么脚本第一次无法按预期工作，但在第一次尝试后却工作得很好。

Answer 1

要找出发生这种情况的原因，请在打开 YouTube 时在控制台中按顺序执行以下步骤

1-

const searchButton = document.getElementById("search-icon-legacy")

2-

const logEvent = (e)=>console.log(e)

3-

searchButton.addEventListener('click',logEvent)

定义这些内容后，单击一次搜索按钮并运行一次代码：

const fetchLink = ()=>{
allInputs = document.getElementsByTagName("input")
allInputs[0].value="Live Fast"

// Fetch button
document.getElementById("search-icon-legacy").click()
}

document.getElementById("search-icon-legacy").click()

您可以在控制台中看到两个事件日志，它们之间的区别是一个名为 isTrusted 的属性。 Event 接口的 isTrusted 只读属性是一个布尔值，当事件由用户操作生成时为 true，当事件由脚本创建或修改或通过 EventTarget.dispatchEvent() 调度时为 false。link

最后我认为 youtub 源代码中有这样的代码，如果事件不受信任，则阻止搜索

  if (e.isTrusted) {
      /* do search */
     } else {
      /* return */
   }