javascript - 点击别处

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');

演示

这是假设您希望保留同一跨度上的多次点击active。如果您不希望这样，请告诉我，我可以修改代码。​</p>

Answer 2

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

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

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

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

演示：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 上将其删除：

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

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

小提琴 ​</p>