右键单击添加/删除课程

Question

I'm trying to add a class on right-click of an element and then remove it when anything else on the page is clicked.

I'm using jQuery.

My function is this so far:

$(".classElement").live('mousedown', function(e) { 
   if( (e.which == 3) ) {
     $(".classElement").addClass("active");
   }
   e.preventDefault();
}).live('contextmenu', function(e){
 e.preventDefault();
});

However, this adds the "active" class to all ".classElement" in the doc, rather than the individual one being clicked. I want to only add the class to the element being clicked.

Also, how can I remove the class when anything else is clicked?

Answer 1

You can removClass active on click of body element, but for this you have to stop event propagation when you are clicking on current element.

$(document).on('mousedown','.classElement', function(e) { 
  e.preventDefault();
  if( (e.which == 3) ) {
    $(this).addClass("active");
  }
  e.stopPropagation();
}).on('contextmenu','.classElement', function(e){
  e.preventDefault();
});
$(document.body).click(function(){
  $(".classElement").removeClass("active");
});

Answer 2

You can use $(this) to target current clicked element, so you can do:

$(this).addClass("active");

instead of:

$(".classElement").addClass("active");

Also, since .live() was removed since version 1.9 , you should use .on() instead.

Answer 3

to target specific element:

$(this).addClass("active");

and to remove it when anything else is clicked, add this:

$(window).one("click", function(){
   $(this).removeClass("active");
});

This adds a one time only click event listener to the window.

Answer 4

Use this code

$(".classElement").live('contextmenu', function(e){ e.preventDefault(); if( (e.which == 3) ) { $(this).addClass("active"); } }); and then remove class on document click

$(document).click(function(){ $(".classElement").removeClass("active"); });