How to prevent custom function execution when another function is executions

Question

Here's my situation:

I have a custom menu on right mouse click for my project. Here, I have document.addEventListener on click, that makes this menu invisible, like this:

var i = document.getElementById("menu").style;
document.addEventListener('click', function(e) {
    i.opacity = "0";
    setTimeout(function() {
        i.visibility = "hidden";
    }, 100);
}, false);

And it's great, works well, but I'm implementing a dropdown submenu that should be opened when you click on a certain element, like so:

 $('#change_color').click(function(){
      if($('#back_color').hasClass('back_color')){
           $('#back_color').removeClass('back_color')
      }else{
           $('#back_color').addClass('back_color')
      }
 })

The thing is that when I click on that #change_color then addEventListener is firing, which is obvious.

The question is – how can I prevent that listener function to execute when I click on #change_color?

Yosvel Quintero · Accepted Answer · 2017-12-26 20:10:05Z

4

You can prevent further propagation of the current event in the capturing and bubbling phases using event.stopPropagation() and for simplicity in your code use jQuery.toggleClass().

Code example:

$('#change_color').click(function (e) {
  $('#back_color').toggleClass('back_color');
  e.preventDefault();
  e.stopPropagation();
});

edited Dec 26, 2017 at 20:10

answered Dec 26, 2017 at 19:59

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yosvel Quintero Over a year ago

@МаркЧолак Updated the answer according to your comment.. Thanks

Collectives™ on Stack Overflow

How to prevent custom function execution when another function is executions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related