通过 javascript 调用单击发送按钮时控制台返回未定义

Question

您好，我正在构建 chrome 扩展并尝试单击发送按钮。 在为其编写代码之前，我正在测试简单的 js 代码，看看是否可以模拟点击发送按钮。

这是我尝试过的一些代码

var button = document.querySelectorAll('.arco-btn.arco-btn-primary.arco-btn-shape-square.m4b-button')[0];    
var clickEvent = new MouseEvent('click', {
        listener : f Ur(),
        once: false,    // whether the event bubbles
        passive: false, // whether the event can be canceled
        type : "click",
        useCapture: false,
    });
    
    // Dispatch the event
button.dispatchEvent(clickEvent);

简单尝试：

button.click()

模拟返回键

const downEvent = new KeyboardEvent('keydown', { key: 'Enter', code: 'Enter', which: 13, keyCode: 13 });
const pressEvent = new KeyboardEvent('keypress', { key: 'Enter', code: 'Enter', which: 13, keyCode: 13 });
const upEvent = new KeyboardEvent('keyup', { key: 'Enter', code: 'Enter', which: 13, keyCode: 13 });

button.dispatchEvent(downEvent);
button.dispatchEvent(pressEvent);
button.dispatchEvent(upEvent);

但一切都是徒劳。 什么都不起作用。

这里是元素的html代码

<button data-tid="m4b_button" class="arco-btn arco-btn-primary arco-btn-size-small arco-btn-shape-square m4b-button" type="button">
<span>Send</span>

事件绑定到它。

请提出任何解决方案，我尝试了监听事件调用的所有方法。 没有任何帮助

这是它的样子

Answer 1

在您帖子的评论部分之后，我假设您想要运行一个在单击页面上的按钮或模拟按钮单击时发送消息的函数。

同时回应@JaromandaX的评论，click()可以随时触发。

我很确定您的问题在于您的

<button>

标签从未关闭。这是一个 JSFIDDLE，它显示了完全使用关闭按钮、“单击”事件侦听器以及脚本启动的“单击”事件的代码。

如果上面的链接不起作用，这里是代码片段

<button data-tid="m4b_button" class="arco-btn arco-btn-primary arco-btn-size-small arco-btn-shape-square m4b-button" type="button">
    <span>Send</span>
</button>

const button = document.querySelector(".arco-btn.arco-btn-primary.arco-btn-size-small.arco-btn-shape-square.m4b-button");

button.addEventListener('click', (event) => { // Define your function here, or call an existing one.
    console.log("Just an example")
})
button.click()