点击别处

Question

我遇到点击事件的问题。点击带有事件的另一个元素（点击），不计算在其他地方点击。我想要活跃的一个元素或没有。

演示：http://jsfiddle.net/WP4RH/

代码：

   $('span').click(function(){
     var $this = $(this);
     if($this.hasClass('active')){
        $this.removeClass('active')}
     else $this.addClass('active');

     $('div').click(function(){                        
        if (!$this.has(this).length) {                                 
             $this.removeClass('active');                            
        }          
     });
     return false;
   });

Answer 1

在span事件处理程序的开头添加：

$('.active').removeClass('active');

Demo

这假设您希望在同一范围内多次点击以保留active。如果你不想那样，请告诉我，我可以修改代码。

Answer 2

对于初学者，您应该将div处理程序移到外面，然后根据div元素移动removeClass。

$('span').click(function(e) {
    e.stopPropagation();

    $(this).parent().find('span').removeClass('active');   
    $(this).toggleClass('active');
});

$('div').click(function() {
    $(this).find('span').removeClass('active');
});

DEMO： http://jsfiddle.net/WP4RH/1/

Answer 3

如果要在单击span本身时保持切换功能，则可以使用以下内容。另请注意，每次单击某个范围时，您都会绑定事件处理程序。

http://jsfiddle.net/WP4RH/7/

$("span").click(function() {
    $(this).siblings("span").removeClass("active");  // remove from other spans
    $(this).toggleClass("active");  // toggle this span
    return false;
});
​
$("div").click(function() {
    $(this).find("span").removeClass("active");  // remove from all spans
});

Answer 4

不要在单击处理程序中绑定单击处理程序，只需检查目标是否为单击处理程序中的div或span。此外，将active类添加到this时，只需在任何兄弟范围内删除它：

$('span').on('click', function(){
    $(this).toggleClass('active').siblings('span').removeClass('active');
});

$('div').on('click', function(e){                        
    if (e.target == this) $('span').removeClass('active');                            
}); 

FIDDLE