.click()触发div元素失效

emotional12138 · 发表于 3 天前

本帖最后由 emotional12138 于 2025-1-2 14:56 编辑

网址：https://sudoku.com/zh
需求描述：我希望实现一个快捷键功能，点击空格键后切换数独的输入模式和备注模式，具体而言就是点击空格键后触发一个div元素的.click()。
问题描述：我写的油猴脚本可以正确通过document.querySelector()找到我希望点击的div元素，但是在触发.click()时没有效果。
油猴代码：
```javascript
// ==UserScript==
// @name       数独快捷键
// @namespace http://tampermonkey.net/
// @version    2024-12-17
// @description  try to take over the world!
// @match       *://sudoku.com/*
// @icon       https://www.google.com/s2/favicons?sz=64&domain=sudoku.com
// @grant       none
// ==/UserScript==

(function() {
'use strict';

// 监听按键事件
document.addEventListener('keydown', function(event) {
      // 检查是否按下了空格键
      if (event.code === 'Space') {
         event.preventDefault(); // 阻止默认空格滚动行为

         // 找到目标元素
         const targetElement = document.querySelector("#game-controls > div:nth-child(3) > div.game-controls-item.game-controls-pencil")

         // 如果元素存在，触发点击
         if (targetElement) {
            targetElement.click();
            console.log('Element clicked!'); //控制台可以正确输出该行，但是上行的.click()无法正确触发
         } else {
            console.log('Target element not found.');
         }
      }
});
})();
```