How to prevent the child element from activating the parent element event?

Asked

Viewed 408 times

4

The event click configured for the element optgroup is also activated when a option is clicked. How this behavior can be avoided? 

$("optgroup").on("click", function() {
  console.log($(this));
  $(this).children().prop("selected", "selected");

  // $('#search_form select option').each(
  // 	function() {
  // 		$(this).removeAttr('selected');
  // 	}
  // );

  // $(this).next().children("option").prop("selected", false);
  // $(this).prev().children("option").prop("selected", false);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="clientesearch-venda_canal_id" class="form-control" name="ClienteSearch[venda_canal_id][]" multiple="" size="5">
<optgroup label="00">
<option value="00.0">00.0 - A CLASSIFICAR</option>
</optgroup>
<optgroup label="01">
<option value="01.0">01.0 - INDUSTRIAS</option>
<option value="01.1">01.1 - GRANDE PORTE</option>
<option value="01.2">01.2 - MEDIO PORTE</option>
<option value="01.3">01.3 - PEQUENO PORTE</option>
</optgroup>
<optgroup label="03">
<option value="03.0">03.0 - DISTRIBUIDOR SOCOCO</option>
<option value="03.1">03.1 - DISTRIBUIDOR</option>
</optgroup>
<optgroup label="04">
<option value="04.0">04.0 - MICRO DISTRIBUIDOR</option>
</optgroup>
<optgroup label="05">
<option value="05.0">05.0 - ATACADISTA E DISTRIBUIDOR</option>
<option value="05.1">05.1 - ATACADISTA</option>
<option value="05.2">05.2 - ATACAREJO</option>
</optgroup>
<optgroup label="06">
<option value="06.0">06.0 - GRANDES REDES NACIONAIS</option>
<option value="06.1">06.1 - GRANDES REDES NACIONAIS</option>
</optgroup>
<optgroup label="09">
<option value="09.0">09.0 - AUTO SERVICE</option>
<option value="09.1">09.1 - SUPERMERCADO</option>
<option value="09.2">09.2 - MERCADO</option>
<option value="09.3">09.3 - LOJA DE CONVENIENCIA</option>
</optgroup>
<optgroup label="12">
<option value="12.0">12.0 - VAREJO TRADICIONAL</option>
<option value="12.1">12.1 - PADARIA</option>
<option value="12.2">12.2 - MERCEARIA</option>
<option value="12.3">12.3 - EMPORIO</option>
<option value="12.4">12.4 - SACOLAO</option>
</optgroup>
<optgroup label="15">
<option value="15.1">15.1 - RESTAURANTE</option>
<option value="15.2">15.2 - LANCHONETE</option>
<option value="15.3">15.3 - BAR</option>
</optgroup>
</select>

javascript jquery

  • You want to avoid a click on option fire the click on optionGroup, that’s it?

  • Exactly, @Sergio. The intention is that by clicking only optionGroup children are all selected. If a option is selected alone, only it must remain.

1 answer

5


In this case it is best to compare whether the event.target is the same as the element that has the headphone of the event, ie the this.

$("optgroup").on("click", function(e) {
  if (e.target != this) return;

You can do it like this:

$("optgroup").on("click", function(e) {
  if (e.target != this) return;
  console.log(this.tagName);
  $(this).children().prop("selected", "selected");

  // $('#search_form select option').each(
  // 	function() {
  // 		$(this).removeAttr('selected');
  // 	}
  // );

  // $(this).next().children("option").prop("selected", false);
  // $(this).prev().children("option").prop("selected", false);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="clientesearch-venda_canal_id" class="form-control" name="ClienteSearch[venda_canal_id][]" multiple="" size="5">
<optgroup label="00">
<option value="00.0">00.0 - A CLASSIFICAR</option>
</optgroup>
<optgroup label="01">
<option value="01.0">01.0 - INDUSTRIAS</option>
<option value="01.1">01.1 - GRANDE PORTE</option>
<option value="01.2">01.2 - MEDIO PORTE</option>
<option value="01.3">01.3 - PEQUENO PORTE</option>
</optgroup>
<optgroup label="03">
<option value="03.0">03.0 - DISTRIBUIDOR SOCOCO</option>
<option value="03.1">03.1 - DISTRIBUIDOR</option>
</optgroup>
<optgroup label="04">
<option value="04.0">04.0 - MICRO DISTRIBUIDOR</option>
</optgroup>
<optgroup label="05">
<option value="05.0">05.0 - ATACADISTA E DISTRIBUIDOR</option>
<option value="05.1">05.1 - ATACADISTA</option>
<option value="05.2">05.2 - ATACAREJO</option>
</optgroup>
<optgroup label="06">
<option value="06.0">06.0 - GRANDES REDES NACIONAIS</option>
<option value="06.1">06.1 - GRANDES REDES NACIONAIS</option>
</optgroup>
<optgroup label="09">
<option value="09.0">09.0 - AUTO SERVICE</option>
<option value="09.1">09.1 - SUPERMERCADO</option>
<option value="09.2">09.2 - MERCADO</option>
<option value="09.3">09.3 - LOJA DE CONVENIENCIA</option>
</optgroup>
<optgroup label="12">
<option value="12.0">12.0 - VAREJO TRADICIONAL</option>
<option value="12.1">12.1 - PADARIA</option>
<option value="12.2">12.2 - MERCEARIA</option>
<option value="12.3">12.3 - EMPORIO</option>
<option value="12.4">12.4 - SACOLAO</option>
</optgroup>
<optgroup label="15">
<option value="15.1">15.1 - RESTAURANTE</option>
<option value="15.2">15.2 - LANCHONETE</option>
<option value="15.3">15.3 - BAR</option>
</optgroup>
</select>

Another variant would be to prevent the event from reaching the optGroup with 

$("option").on("click", function(e) { 
    e.stopPropagation(); 
});

You can do it like this:

$("option").on("click", function(e) { e.stopPropagation(); });
$("optgroup").on("click", function(e) {
  console.log(this.tagName);
  $(this).children().prop("selected", "selected");

  // $('#search_form select option').each(
  // 	function() {
  // 		$(this).removeAttr('selected');
  // 	}
  // );

  // $(this).next().children("option").prop("selected", false);
  // $(this).prev().children("option").prop("selected", false);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="clientesearch-venda_canal_id" class="form-control" name="ClienteSearch[venda_canal_id][]" multiple="" size="5">
<optgroup label="00">
<option value="00.0">00.0 - A CLASSIFICAR</option>
</optgroup>
<optgroup label="01">
<option value="01.0">01.0 - INDUSTRIAS</option>
<option value="01.1">01.1 - GRANDE PORTE</option>
<option value="01.2">01.2 - MEDIO PORTE</option>
<option value="01.3">01.3 - PEQUENO PORTE</option>
</optgroup>
<optgroup label="03">
<option value="03.0">03.0 - DISTRIBUIDOR SOCOCO</option>
<option value="03.1">03.1 - DISTRIBUIDOR</option>
</optgroup>
<optgroup label="04">
<option value="04.0">04.0 - MICRO DISTRIBUIDOR</option>
</optgroup>
<optgroup label="05">
<option value="05.0">05.0 - ATACADISTA E DISTRIBUIDOR</option>
<option value="05.1">05.1 - ATACADISTA</option>
<option value="05.2">05.2 - ATACAREJO</option>
</optgroup>
<optgroup label="06">
<option value="06.0">06.0 - GRANDES REDES NACIONAIS</option>
<option value="06.1">06.1 - GRANDES REDES NACIONAIS</option>
</optgroup>
<optgroup label="09">
<option value="09.0">09.0 - AUTO SERVICE</option>
<option value="09.1">09.1 - SUPERMERCADO</option>
<option value="09.2">09.2 - MERCADO</option>
<option value="09.3">09.3 - LOJA DE CONVENIENCIA</option>
</optgroup>
<optgroup label="12">
<option value="12.0">12.0 - VAREJO TRADICIONAL</option>
<option value="12.1">12.1 - PADARIA</option>
<option value="12.2">12.2 - MERCEARIA</option>
<option value="12.3">12.3 - EMPORIO</option>
<option value="12.4">12.4 - SACOLAO</option>
</optgroup>
<optgroup label="15">
<option value="15.1">15.1 - RESTAURANTE</option>
<option value="15.2">15.2 - LANCHONETE</option>
<option value="15.3">15.3 - BAR</option>
</optgroup>
</select>

  • Your solution is viable. Is this really the default behavior of the selector? The child also invokes the parent element event?

  • 1

    @Exact Marcelodeandrade. If you want to avoid this you have to do $("option").on("click", function(e) { e.stopPropagation(); });. But this way it gets shorter.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.