Stoppropagation with right click / right click

Question

With this code I can stop the spread of a dropdown menu by clicking on the document. It works very well. Now I would like to accomplish the same thing, but with the right click.

The magic happens thanks to event.stopPropagation(); inside onclick what is the equivalent of this for the right click? Is it possible to use double?

Functional code.

$(document).on('click','.body-jq-dropdown',function(event){ event.stopPropagation(); });

Example

The goal is, that when the red background is enabled, it is possible to remove it with a click on the document.

$(document).on('click','.add-red-bg',function(event){
  jQuery('body').addClass('body-red-habilitado');
});
$(document).on('click contextmenu','.body-red-habilitado', function(event){
    event.stopPropagation();
    jQuery('body').removeClass('body-red-habilitado');
    console.clear();
    console.log(event.type);
});

body {
  background:#eee;
}

.body-red-habilitado {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button class="add-red-bg">Habilitar Background RED</button>

Answer 1

The event contextmenu means the right button has been clicked. Simply add it to the event list of the method .on().

But the problem is also that the stopPropagation() shall be applied to the button and not to the document.

Behold:

$('.add-red-bg').on('click contextmenu',function(event){
   event.stopPropagation();
   $('body').addClass('body-red-habilitado');
});

$(document).on('click contextmenu', function(event){
    $('body').removeClass('body-red-habilitado');
    console.clear();
    console.log(event.type);
});

body {
  background:#eee;
}

.body-red-habilitado {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-red-bg">Habilitar Background RED</button>