V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Eighty
V2EX  ›  JavaScript

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

  •  
  •   Eighty · 146 天前 · 1427 次点击
    这是一个创建于 146 天前的主题,其中的信息可能已经有所发展或是发生改变。

    由于需要通过浏览器的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);
    

    如果能解决,可以有偿

    2 条回复    2024-06-08 07:45:50 +08:00
    shenyu1996
        1
    shenyu1996  
       146 天前 via Android   ❤️ 1
    事件注册前重写一下这个方法呢 Event.prototype.stopPropagation ,前面加一些判断逻辑
    Eighty
        2
    Eighty  
    OP
       146 天前
    好像可以哎!感谢大佬回答👍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5575 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 01:32 · PVG 09:32 · LAX 18:32 · JFK 21:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.