Наложение кликов

350

13 января 2017, 11:02

Есть два блока. Необходимо, чтобы при клике на блок №2 не срабатывало действие клика по блоку №1.

$(document).ready(function(){ 
  $(document).on('click', '.b_1', function(event){ 
    var target = $(event.currentTarget); 
    target.css({ 
      color: 'white' 
    }); 
  }); 
}); 
 
$(document).ready(function(){ 
  $(document).on('click', '.b_2', function(event){ 
    var target = $(event.currentTarget); 
    target.css({ 
      color: 'white' 
    }); 
  }); 
});

.b_1, .b_2 { 
  height: 40px; 
  color: black; 
} 
 
.b_1 { 
  width: 200px; 
  background-color: blue; 
} 
 
.b_2 { 
  width: 40px; 
  background-color: red; 
  float: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='b_1'>1 
      <div class='b_2'>2</div> 
</div>

Пример

Answer 1

добавьте вызов .stopPropagation()

$(document).ready(function(){ 
  $(document).on('click', '.b_1', function(event){ 
    var target = $(event.currentTarget); 
    target.css({ 
      color: 'white' 
    }); 
  }); 
}); 
 
$(document).ready(function(){ 
  $(document).on('click', '.b_2', function(event){ 
    //Чтобы событие не всплывало в объемлющий div 
    event.stopPropagation();  
    var target = $(event.currentTarget); 
    target.css({ 
      color: 'white' 
    }); 
  }); 
});

.b_1, .b_2 { 
  height: 40px; 
  color: black; 
} 
 
.b_1 { 
  width: 200px; 
  background-color: blue; 
} 
 
.b_2 { 
  width: 40px; 
  background-color: red; 
  float: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='b_1'>1 
      <div class='b_2'>2</div> 
</div>

Answer 2

В конце функции клика блока №2 добавте, event.stopPropagation();

$(document).ready(function(){
    $(document).on('click', '.b_2', function(event){
    var target = $(event.currentTarget);
    target.css({
        color: 'white'
    });
    event.stopPropagation();
  });
});