How to cancel event click on site

Question

I use a plugin jQuery which generates a hidden side menu and when clicking the button, the menu appears, shifting the content of the site to the side. The problem is that the site elements remain "clickable" and the menu does not close automatically if I click outside it.

With that, I created the script below:

$('.wrapp').on('click', function(){
    if ( ($('#sidr').is(':visible')) ) {
        $(this).click(false);
        $.sidr('close', 'sidr');
    }
});

At first, it should run when clicked on any element within the div .wrapp, closing the menu (id #sidr) and overriding the possible alternative click.

Although the menu is closing right, I can still click on any link outside the menu.

Best explanation in the picture:

Answer 1

You can, for example, register an event by clicking on the page that will cancel the click on certain elements if your menu is open/visible:

$("body")
    .find('a:not(#meuElementoClicavel)')
    .on("click", function(e) {
        if ($('#meuElementoClicavel').is(':visible')){
            return false;
        }
    });

View Example in Jsfiddle

In the practical example you can see that with the element #meuElementoClicavel visible, the links page does not work.

In this other example, the code is present on the page, but as the element #meuElementoClicavel is not visible, the links work normally.

---

Applying this to the practical case of your code in question:

$('.wrapp').on('click', function(){
    if ($('#sidr').is(':visible')) {
        $.sidr('close', 'sidr');
        return false;
    }
});

Although in your practical case other things can influence the proper functioning of the "cancel" click action...

Answer 2

If .wrapp is an overlay on the clickable objects, replace: $(this).click(false); for: event.stopPropagation();

$('.wrapp').on('click', function(event){
    if ( ($('#sidr').is(':visible')) ) {
        event.stopPropagation();
        $.sidr('close', 'sidr');
    }
});

But if the clickable objects are inside .wrapp use the: event.preventDefault();

$('.wrapp').on('click', function(event){
    if ( ($('#sidr').is(':visible')) ) {
        event.preventDefault();
        $.sidr('close', 'sidr');
    }
});