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

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()以防止其他处理程序执行。

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

If several listeners are attached to the same element for the same event type, they are called in order in which they have been added. If during one such call, event.stopImmediatePropagation() is called, no remaining listeners will be called.

下面，我用一个附加按钮“模拟”了您的弹出窗口拦截器测试...因为它似乎不起作用，至少对于 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>