How to undo a click event on the site

Question

How to undo a click event on the site

Navigation

#1 by (7 votes)
#2 by (3 votes)

2

I use a jQuery plugin that generates a hidden side menu, and by clicking the button, the menu pops up, shifting the site content sideways. The problem is that site elements remain "clickable" and the menu does not close automatically if I click outside it.

With this, 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 you click on any element within div .wrapp , closing the menu (id #sidr ) and overriding the possible alternate click.

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

Better explanation in the image:

html jquery

asked by anonymous 09.10.2014 / 21:07

2 answers

Tips for transforming procedural code into object-oriented? [closed] Is it advantageous to use the MVC standard in small applications? [closed]

score 7 · Answer 1

You can, for example, register a click event on the page that will uncheck certain items 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 working example you can see that with the #meuElementoClicavel element visible, the links of the page does not work.

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

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

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

Although in your case, other things can influence the correct operation of the action to "cancel" the click ...

score 3 · Answer 2

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

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

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

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