Question

我有一个按钮，单击该按钮将触发打开一个弹出窗口。

<button id="thisId">OPEN POPUP</button>

为此事件将是如下

$(document).on('click', '#thisId', function(){
    // DO SOMETHING TO OPEN THE POPUP HERE
});

如果浏览器允许在其上打开弹出窗口，则此按钮应该可以正常工作。问题是启用了弹出窗口阻止程序。我有很多这样的按钮，大概就像我目前正在研究的项目中有将近100个按钮具有类似的功能一样，我不想对每个按钮的每个事件处理程序进行检查。我想为所有按钮创建一个公共事件处理程序，该事件处理程序将在单击按钮时触发。

所以我在同一按钮上添加了另一个属性

<button data-openpopup id="thisId">OPEN POPUP</button>

为此，我附加了一个特定于此属性的事件。单击该按钮后，如果为该浏览器设置了弹出窗口阻止程序，它将进行检查以检查弹出窗口阻止程序是否打开，如果打开，它将使用jconfirm的警报框向用户发出警报。此次活动将如下

$(document).on('click', '[data-openpopup]', function(){
    var $this = $(this);

    var pop = window.open("about:blank", "new_window_123", "height=150,width=150");

    if (!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0 || pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150){
        pop && pop.close();
        // Call jconfirm alert if popup is disabled
        $.alert({
            title: 'Popup blocked alert!',
            content: 'Your popup blocker is currently enabled.',
            closeIcon: true,
            buttons: {
                close: {
                    text: 'Close',
                    btnClass: 'btn-blue'
                }
            }
        });
    } else {
        pop && pop.close();
    }
});

现在，这里的问题是，我希望这样，当单击按钮时，它将覆盖原始的单击方法，即打开弹出窗口，阻止其运行，并首先执行弹出窗口检查。如果检查为假，则仅继续执行该事件以打开弹出窗口。

那么我该怎么做？

Answer 1

您可以使用.stopImmediatePropagation()阻止其他处理程序执行。

但是您必须将其放在必须先注册的处理程序中，因为必须按照侦听器的注册顺序执行回调。

如果针对同一事件类型将多个侦听器附加到同一元素，则会按添加它们的顺序来调用它们。如果在一次这样的调用中，调用event.stopImmediatePropagation（），则不会调用其余的侦听器。

下面，我用一个附加按钮“模拟”了您的弹出窗口阻止程序测试……由于它似乎不起作用，至少在AdBlocker Plus（Chrome扩展）上没有。据我所知，无论AdBlocker是否处于活动状态，您的情况始终是正确的。

// To simulate a working blocker detection var blocker=true; $("#blockerToggle").on("click",function(){ blocker=!blocker; $(this).find("span").text(blocker.toString().toUpperCase()).css({"color":(blocker)?"green":"red"}); }).trigger("click"); // Assuming a good popup blocker detection // This handler can stop the others... Registered AFTER this one. $(document).on('click', '[data-openpopup]', function(e){ if(blocker){ console.log("Blocker ON! Prevent the other listener(s) from executing."); e.stopImmediatePropagation(); } else { console.log("Okay, let the other listener(s) execute."); } }); // Other handler $(document).on('click', '#thisId', function(){ console.log("Other handler executed."); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button data-openpopup id="thisId">OPEN POPUP</button> <button id="blockerToggle">Popup blocker active => <span></span></button>

使用另一个JavaScript事件绕过javascript事件

1 个答案: