右键单击添加/删除课程

Question

我试图在元素的右键单击上添加一个类，然后在单击页面上的其他任何内容时将其删除。

我正在使用jQuery。

到目前为止，我的职能是：

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

但是，这会将“活动”类添加到文档中的所有“ .classElement”中，而不是单击单个类。 我只想将类添加到要单击的元素中。

另外，单击其他任何按钮时如何删除该类？

Answer 1

您可以在单击body元素时激活removClass，但是为此，您必须在单击当前元素时停止事件传播。

$(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

您可以使用$(this)定位当前单击的元素，因此可以执行以下操作：

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

代替：

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

另外，由于从1.9版删除了.live() ，因此应该改用.on() 。

Answer 3

针对特定元素：

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

并在单击其他任何内容时将其删除，请添加以下内容：

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

这会将一次性单击事件侦听器添加到窗口。

Answer 4

使用此代码

$(".classElement").live('contextmenu', function(e){ e.preventDefault(); if( (e.which == 3) ) { $(this).addClass("active"); } }); 然后删除文档上的类，单击

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