是否可以让其他 javascript 事件侦听器等待异步事件

Is it possible to make other javascript event listeners wait for an async event?

本文关键字：事件 侦听器 等待 异步 javascript 其他 是否      更新时间：2023-09-26

我想劫持一个网页(使用Tampermonkey(，该网页有一个带有一些事件侦听器的按钮，最后是一个重定向。

有没有办法将我自己的点击事件处理程序添加到按钮中，该处理程序发出 AJAX 请求，并等待它完成，然后再继续处理其他事件侦听器，所以我的 AJAX 请求肯定在重定向之前完成？

我知道停止即时传播，但不知道如何异步"延迟"传播。

不，不能让其他事件处理程序等待。 您有时可以覆盖/劫持现有功能，但这通常无法使用 Tampermonkey 实现，并且在可能的情况下可能会变得混乱(如在 Firefox + Greasemonkey 中(。

对于按钮等可点击元素，一种解决方法是覆盖按钮，在其上设置侦听器，然后让它们在时机成熟时在原始按钮上触发所需的事件。

例如，考虑以下代码段：

  1. #mainButton及其代码表示原始页面。
  2. "劫持"按钮模拟您的篡改猴脚本的运行。
  3. "脚本"创建一个与按钮大小相同的div，并将其放置在按钮上。 因此，任何点击都会被div 捕获，而不是按钮。
  4. 拦截代码执行一些异步操作，然后触发对原始按钮的单击。

//--------------------------
//--- The page's code:
//--------------------------
$("#mainButton").click ( function () {
    logline ("The button was clicked.");
} );
//------------------------------
//--- The script setup and code:
//------------------------------
$("#tmIntercept").click ( function () {
    logline ("==> Main button is now intercepted.");
    //this.disabled = true;
    $(this).attr ( {"disabled": true} );
    var targBtn     = $("#mainButton");
    var overlayDiv  = $('<div id="tmBtnOverlay">').css ( {
        'width':        targBtn.outerWidth (),
        'height':       targBtn.outerHeight (),
        'position':     'absolute',
        'top':          targBtn.offset ().top,
        'left':         targBtn.offset ().left,
        'z-index':      8888,
        'background':   "lime",
        'opacity':      "0.2"
    } )
    .appendTo ("body");
    overlayDiv.click ( function (zEvent) {
        //-- Guard against more global handlers.
        zEvent.stopImmediatePropagation ();
        logline ("Doing some AJAXy thing... <span>&nbsp;</span>");
        //-- Simulated AJAX call:
        setTimeout (doSomeAjaxyThing, 1111);
    } );
} );
function doSomeAjaxyThing () {
    $("#eventLog > p > span").first ().text ('Done.');
    //-- Now send required events to the original button:
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent ("click", true, true);
    $("#mainButton")[0].dispatchEvent (clickEvent);
}
function logline (str) {
    this.lineNumber = this.lineNumber + 1  ||  1;
    var lineDisplay = (1e15 + this.lineNumber + "").slice (-3);  //-- zero pad 3 places
    $("#eventLog").prepend ('<p>' + lineDisplay + ' &nbsp; ' + str + '</p>');
}
#mainButton {
    font-size: 2em;
    padding: 0.3ex 2ex;
}
#eventLog {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}
#eventLog > p {
    margin: 0.3ex 2ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p><button id="mainButton">The Button</button></p>
<p><button id="tmIntercept" autocomplete="off">Hijack the button</button></p>
<fieldset>
    <legend>Event Log:</legend>
    <div id="eventLog"></div>
</fieldset>

笔记：

  1. 在某些情况下，您可能会想直接调用页面的代码。 但触发事件通常更简单、更可靠、更安全。
  2. 这只是覆盖过程的演示。 在实践中，简单的绝对定位可能需要调整。 (通常将目标节点包装在相对位置的div 中并调整偏移量。 这超出了这个问题的范围。
相关文章：