1
votes

jQuery sur clic exclut un élément spécifique

Je souhaite désactiver les clics sur certains éléments dans un div parent avec jQuery. Comment faire?

Mon approche consistait à essayer de l'exclure de la sélection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap1">
  <div class="wrap2">
    <p>Some text</p>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </div>
  <div class="wrap3">
      <ul>
        <li>Should not be clickable</li>
      </ul>
  </div>
</div>

$('.wrap1 :not(.wrap3 li)').on("click", function() {
  alert(1);
})

Le résultat que je recherche est le suivant: si je clique à l'intérieur du div wrap1 , cela devrait m'inviter à la boîte d'alerte, sauf lorsque je clique à l'intérieur du wrap3 div.

Que me manque-t-il ici?

javascript jquery html

0 commentaires

5 Réponses :

1
votes

Votre meilleur pari est de vérifier la cible de l'événement.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap1">
  <div class="wrap2">
    <p>Some text</p>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </div>
  <div class="wrap3">
    <div style="border: 1px solid red;">
    ABC
    <div style="background-color:dodgerblue;">
    CDE
    </div>
    </div>
      <ul>
        <li>Should not be clickable</li>
      </ul>
  </div>
</div>

$('.wrap1').on("click", function(e){
  if(!$(e.target).is(".wrap3, .wrap3 *")){
    alert(1);
  }
})

$('.wrap1').on("click", function(e){
  if(!$(e.target).is(".wrap3, .wrap3 *")){
    alert(1);
  }
})

2 commentaires

Est-il possible de faire cela avec tout le div wrap3 , pas seulement avec l'élément

@Radical_Activity J'ai mis à jour ma réponse. Essaye le!

1
votes

le mot clé function n'est pas nécessaire dans la fonction de flèche

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap1">
  <div class="wrap2">
    <p>Some text</p>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </div>
  <div class="wrap3">
      <ul>
        <li>Should not be clickable</li>
      </ul>
  </div>
</div>

$('.wrap1 :not(.wrap3 li)').on("click", e => {
  e.stopPropagation();
  alert(1);
})

2 commentaires

Cela me demande toujours l'alerte lorsque je clique sur le

Je ne savais pas que c'était ce que tu voulais mais j'ai fini

1
votes

Je ne sais pas pourquoi votre méthode ne fonctionne pas, mais cela fonctionne:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap1">
  <div class="wrap2">
    <p>Some text</p>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </div>
  <div class="wrap3">
      <ul>
        <li>Should not be clickable</li>
      </ul>
  </div>
</div>

$('.wrap1 li').not('.wrap3 li').on("click", (e) => {
  e.stopPropagation();
  alert(1);
})

1 commentaires

Ce qui est étrange, c'est que cela ne me donne l'alerte que lorsque je clique sur la liste 1,2,3 textes, mais pas quand je clique sur some-text ou sur la zone vide à côté de la liste. Pourquoi donc?

1
votes

Utilisez event.stopPropagation()

jQuery Stop Propagation

<script>
    
$('.wrap1').on("click", function(){
  alert(1);
});

$(".wrap3").on("click", function(event){
  // This will stop propagation of the event to parent element.
  event.stopPropagation(); 
});
    
</script>

0 commentaires

0
votes

Cela devrait le faire!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap1">
  <div class="wrap2">
    <p>Some text</p>
    <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
  </div>
  <div class="wrap3">
      <ul>
        <li>Should not be clickable</li>
      </ul>
  </div>
</div>

$('.wrap1').on("click", function(e) {
  if( $(e.target).is('.wrap3 li') ) { return false; }
  alert(1);
})

0 commentaires