由于捕获阶段事件监听器调用了 event.stopPropagation()方法，使用 js 的 click()点击无效。如何才能在浏览器的 console 控制台使用 js 模拟点击该 Button？

13次阅读

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

由于需要通过浏览器的 console 控制台用 js 实现在网页上实现一个点击的自动化操作。

按钮 Button 同时添加了两个事件监听器，一个是冒泡阶段事件监听器（useCapture为 false），需要正常触发；另一个是捕获阶段事件监听器（useCapture 为true），调用了 event.stopPropagation() 方法。

其中需要触发冒泡阶段事件监听器，但是捕获阶段事件监听器调用了 event.stopPropagation() 方法，所有采用以下方式模拟点击该 Button 没有任何反应：

btn = document.getElementsByClassName('')[0]

btn.click()模拟点击按钮

btn.dispatchEvent(new MouseEvent('click', { bubbles: true}));

btn.send_keys(Keys.ENTER)

注：不能直接调用冒泡阶段的事件监听器，也不能修改捕获阶段的事件监听器

其他尝试（都没有效果）

使用 setTimeout 函数来延迟调用 event.stopPropagation() 方法。

// 获取元素
let element = document.getElementById('myElement');

// 添加捕获阶段的事件监听器
element.addEventListener('click', function(event) {setTimeout(function() {event.stopPropagation();
    }, 0);
}, true);

// 添加冒泡阶段的事件监听器
element.addEventListener('click', function() {console.log('冒泡阶段的事件监听器被触发');
}, false);

// 触发点击事件
element.click();

使用 dispatchEvent 方法来创建和触发一个新的事件。

// 获取元素
let element = document.getElementById('myElement');

// 创建一个点击事件
let event = new MouseEvent('click', {
    bubbles: true,  // 使事件在冒泡阶段传播
    cancelable: true  // 使事件可以被取消
});

// 添加冒泡阶段的事件监听器
element.addEventListener('click', function() {console.log('冒泡阶段的事件监听器被触发');
}, false);

// 触发事件
element.dispatchEvent(event);