How do I prevent the child element from activating the parent element's event?

Question

How do I prevent the child element from activating the parent element's event?

Navigation

#1 by (5 votes)

4

The click event set for the optgroup element is also enabled when a option is clicked. How can this behavior 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><selectid="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

asked by anonymous 10.10.2017 / 16:10

1 answer

My php system is running on Windows but it is giving UBUNTU error Count how many months have they "turned" from two dates?

score 5 · Accepted Answer

In this case it is best to compare if the event.target is the same as the element that has the event handset, ie 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><selectid="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 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><selectid="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>