Bypassing javascript event using another javascript event

Question

I have a button which when click will trigger to open up a popup.

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

The event for it will be something as follow

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

This button should work as expected if the browser allows popup to be opened on it. Problem is when the popup blocker is enabled. I have quite an amount of buttons like this, probably like nearly 100 buttons with similar thing in the project that i currently working on, and i dont want to do the checking on each of the event handler for each respective buttons. I wanna make a common event handler for all the buttons, which will trigger on click of the button.

So i added another attribute to the same button

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

For this i attach an event specific to this attribute. When the button is clicked, in case if popup blocker is set on for that browser, it will do a checking to check whether popup blocker is on, and if it is, it will throw an alert to the user using jconfirm's alert box. The event for it will be something as follow

$(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();
    }
});

Now the issue here is, i want it so that, when click on the button, it will override the original click method which is to open a popup, preventing it from running, and do the popup checking first. If checking is false, then only proceed with the event to open the popup.

So how can i do this?

Not that i want to unbind event for data-openpopup because that is what i want to do first. I can unbind the #thisId event handler instead but will it unbind the event for data-openpopup too? — Fred A
– Fred A, Commented Aug 6, 2018 at 7:15

Louys Patrice Bessette · Accepted Answer · 2018-08-06 08:56:51Z

You could use .stopImmediatePropagation() to prevent the other handler from executing.

But you have to put that in a handler that must be registered before the other(s) since the callbacks are executed in the order the listeners were registered.

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.

Below, I "simulated" your popup blocker test with an additionnal button... Since it does not seem to be working, at least with AdBlocker Plus (Chrome extention). From what I saw, your condition is always true, AdBlocker active or not.

// 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>

Collectives™ on Stack Overflow

Bypassing javascript event using another javascript event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related