Comment empêcher Preventdefault() de prendre effet

Méthodes pour empêcher default() de prendre effet : 1. Utilisez le proxy d'événement. Le proxy d'événement est une technologie qui ajoute des écouteurs d'événements aux éléments parents, puis déclenche des événements sur les éléments enfants via le bouillonnement d'événements. Vous pouvez utiliser le bouillonnement d'événements pour modifier ou empêcher. le comportement par défaut de l'événement en cours ; 2. Variable flag Si vous devez décider de bloquer le comportement par défaut de l'événement en fonction des conditions du même gestionnaire d'événements, vous devez utiliser une variable flag pour contrôler l'appel de. la méthode PreventDefault().

Dans les navigateurs, la méthode PreventDefault() est souvent utilisée pour empêcher le comportement par défaut des événements. Par exemple, vous pouvez utiliser cette méthode lorsque vous souhaitez personnaliser le comportement de clic sur un lien ou de soumission d'un formulaire, plutôt que de laisser le navigateur effectuer le comportement de navigation ou de soumission de formulaire par défaut.

Cependant, si vous souhaitez empêcher la méthode PreventDefault() de prendre effet, vous devrez peut-être utiliser des techniques plus complexes, car JavaScript ne fournit pas de méthode directe pour annuler ou remplacer le comportement de PreventDefault().

1. Utiliser le proxy d'événement

Le proxy d'événement est une technologie qui ajoute des écouteurs d'événements aux éléments parents, puis déclenche des événements sur les éléments enfants via le bouillonnement d'événements. De cette façon, vous pouvez modifier ou empêcher le comportement par défaut de l'événement pendant qu'il bouillonne.

Voici un exemple simple :

document.body.addEventListener('click', function(event) {  
  if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Prevent Default') {  
    event.stopPropagation();  // 阻止事件冒泡，从而阻止默认行为  
  }  
});  
  
document.body.innerHTML = &#39;<button>Prevent Default</button><div>Some content</div>&#39;;

Dans cet exemple, lorsque vous cliquez sur le bouton, le navigateur tente de déclencher le comportement de clic par défaut (comme naviguer vers un lien ou soumettre un formulaire). Mais comme nous avons bloqué la propagation de l’événement alors qu’il bouillonnait, le comportement par défaut n’a pas été déclenché.

Cependant, cette méthode n'empêche pas le comportement par défaut des événements pour lesquels la méthode PreventDefault() a été appelée. Étant donné que la méthode PreventDefault() est appelée dans le gestionnaire d'événements, une fois l'exécution du gestionnaire d'événements terminée, l'événement a été bloqué. Vous ne pouvez pas modifier ce résultat après l'exécution du gestionnaire d'événements.

2.Variable Flag

Si vous devez décider d'empêcher le comportement par défaut de l'événement en fonction des conditions du même gestionnaire d'événements, vous devrez peut-être utiliser une variable flag pour contrôler l'appel à PreventDefault() méthode. Par exemple :

var preventDefault = false;  
  
document.body.addEventListener('click', function(event) {  
  if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Prevent Default') {  
    preventDefault = true;  
  } else if (preventDefault) {  
    event.preventDefault();  
  }  
});  
  
document.body.innerHTML = &#39;<button>Prevent Default</button><div>Some content</div>&#39;;

Dans cet exemple, lorsque vous cliquez sur le bouton, la variable PreventDefault sera définie sur true. Ensuite, lorsque le gestionnaire d'événements traite d'autres éléments, il vérifie la valeur de la variable PreventDefault et appelle la méthode PreventDefault() si nécessaire. De cette façon, vous pouvez empêcher le comportement par défaut de l'événement en fonction des conditions au sein du même gestionnaire d'événements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!