关于javascript:油猴脚本笔记如何获取React框架开发的页面元素对元素使用click没有反应怎么办如何一步步的执行操作

51次阅读

共计 1666 个字符，预计需要花费 5 分钟才能阅读完成。

如果是 React 开发的页面大概率是因为没有设置事件监听器。

先来看看有没有绑定事件监听器：
F12 -> CTRL+SHIFT+C 审查元素 -> Event Listeners 选项卡

有绑定事件监听器的元素：
没有绑定事件监听器的元素：

没有绑定事件监听器的元素的解决办法：

const ele = document.querySelector("#nameZh");
const prop = Object.keys(zh).find(p => p.startsWith('__reactEventHandlers'));
console.log(ele[prop]);

下面最要害的代码是第二行变量 prop 的获取，利用遍历键值，获取 react 元素绑定的办法。

而后触发这些事件。

 let mousedown = new Event("mousedown" ,{ "bubbles": true, "cancel" : true, "composed": true});
 let keyup = new Event('keyup' ,{ "bubbles": true, "cancel" : true, "composed": true});
 var click = new Event('click' ,{ "bubbles": true, "cancel" : true, "composed": true});
 let ele = document.querySelector("selector")

 ele.dispatchEvent(mousedown)
 ele.dispatchEvent(keyup)
 ele.dispatchEvent(click)

把函数都封装返回成 Promise

例子：```
  // 填充指定 input 框
  // @param {string} selector
  // @param {string} content
  const fillInput = (selector, content) => {
    return new Promise(resolve => {setTimeout(() => {var mousedown = new Event("mousedown", { "bubbles": true, "cancel": true, "composed": true});
        var keyup = new Event('keyup', { "bubbles": true, "cancel": true, "composed": true});

        let ele = document.querySelector(selector)

        ele.focus();
        document.execCommand("inserttext", false, content)

        ele.dispatchEvent(mousedown);
        ele.dispatchEvent(keyup);

        // console.log(selector)
        resolve();}, 300);
    })
  }

  调用：fillInput(zhTitSelector, zh_title)
    .then(() => fillInput(zhContSelector, zh_content))
    .then(() => fillInput(enTitSelector, en_title))
    .then(() => fillInput(enContSelector, en_content))
```

有 2 个可能的计划，

事件监听按程序执行，例如：
```
focus 聚焦 -> input 输出内容 -> change 内容扭转 -> blur 勾销聚焦
```
如果事件监听器有这些，按下面的办法一个个触发，
调用 document.execCommand(“inserttext”, false, “username”) API,
这个 api 能够模仿人的操作，然而已从相干的 web 规范中移除，2023 年 2 月 20 日对我我的项目有用