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

100 天前
 Eighty

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

按钮Button同时添加了两个事件监听器,一个是冒泡阶段事件监听器(useCapturefalse),需要正常触发;另一个是捕获阶段事件监听器(useCapturetrue),调用了event.stopPropagation()方法。

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

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

  • btn.click()模拟点击按钮
  • btn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
  • btn.send_keys(Keys.ENTER)

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

其他尝试(都没有效果)

  1. 使用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();
  1. 使用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);

如果能解决,可以有偿

1328 次点击
所在节点    JavaScript
2 条回复
shenyu1996
100 天前
事件注册前重写一下这个方法呢 Event.prototype.stopPropagation ,前面加一些判断逻辑
Eighty
100 天前
好像可以哎!感谢大佬回答👍

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1047865

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX