Comment empêcher le bouillonnement JS et le comportement par défaut du navigateur

Cette fois, je vais vous montrer comment empêcher le bouillonnement de JS et le comportement par défaut du navigateur. Quelles sont les précautions pour empêcher le bouillonnement de JS et le comportement par défaut du navigateur. est un cas pratique. Jetons un coup d’oeil.

Compatibilité des événements :

function myfn(e){ var evt = e :window.event;🎜>

js arrête le bouillonnement de l'événement

function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}

js empêche le comportement par défaut

function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}

Ce qui suit sont des instructions détaillées sur

JavaScriptarrêter le bouillonnement et empêcher le comportement par défaut

Empêcher le bouillonnement

La méthode de w3c est e.stopPropagation(), et IE utilise e.cancelBubble = true

stopPropagation est également une méthode de l'objet événement (Event). Sa fonction est d'empêcher l'événement bouillonnant de l'élément cible, mais. ce sera le comportement par défaut qui n'est pas bloqué. Qu’est-ce qu’un événement bouillonnant ? Si un événement « clic » est lié à un bouton, l'événement « clic » sera à son tour déclenché dans son élément parent. stopPropagation empêche les événements de l'élément cible de remonter jusqu'à l'élément parent. Par exemple :

<div id=&#39;div&#39; onclick=&#39;alert("div");&#39;>
<ul onclick=&#39;alert("ul");&#39;>
<li onclick=&#39;alert("li");&#39;>test</li>
</ul>
</div>

Le code ci-dessus, la démo est la suivante, lorsque l'on clique sur test, alert("li"), alert("ul"), alert("div") seront déclenchés dans l'ordre, ce sont les événements qui bouillonnent.

Empêcher les bulles

window.event? window.event.cancelBubble = true : e.stopPropagation();

Empêcher le comportement par défaut

La méthode w3c est e.preventDefault(), et IE utilise e.returnValue = false;

preventDefault est une méthode de l'objet événement (Event), et sa fonction est d'annuler le comportement par défaut d'un élément cible. Puisque nous parlons de comportement par défaut, l'élément doit bien sûr avoir un comportement par défaut avant de pouvoir être annulé. Si l'élément lui-même n'a pas de comportement par défaut, l'appel sera bien sûr invalide. Quels éléments ont des comportements par défaut ? Tels que le lien , le bouton de soumission , etc. Lorsque l'objet événementiel annulable est faux, cela signifie qu'il n'y a pas de comportement par défaut. Même s'il existe un comportement par défaut, l'appel de PreventDefault ne fonctionnera pas.

Nous savons tous que l'action par défaut du lien est de sauter à la page spécifiée. Prenons-le comme exemple pour l'empêcher de sauter :

//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

return false.

Le retour false de javascript empêchera uniquement le comportement par défaut, mais l'utilisation de jQuery empêchera à la fois le comportement par défaut et empêchera les objets de bouillonner.

Ce qui suit utilise du js natif, qui empêchera uniquement le comportement par défaut, pas Arrêter de bouillonner

<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

Ce qui suit utilise jQuery pour à la fois empêcher le comportement par défaut et arrêter de bouillonner

<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});

Résumé de la façon de l'utiliser

Quand vous en avez besoin pour arrêter le comportement de bouillonnement Lorsque vous devez empêcher le comportement par défaut, vous pouvez utiliser

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

Points d'attention de l'événement

l'événement représente l'état de l'événement, comme le déclenchement des éléments de l'objet d'événement , position et statut de la souris, touches enfoncées, etc. ;

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

l'objet événement n'est valide que pendant l'événement.

Les événements de Firefox sont différents de ceux d'IE. Ceux d'IE sont des variables globales et peuvent être utilisés à tout moment. Ceux de Firefox ne peuvent être utilisés que par guidage de paramètres et sont des variables temporaires au moment de l'exécution.

Dans IE/Opera, c'est window.event, dans Firefox, c'est event ; et l'objet de l'événement est window.event.srcElement dans IE, dans Firefox, c'est event.target, les deux sont disponibles dans Opera.

Les deux phrases suivantes ont le même effet :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles sur le site PHP chinois !

Lecture recommandée :

function a(e){
var e = (e) ? e : ((window.event) ? window.event : null); 
var e = e || window.event; // firefox下window.event为null, IE下event为null

L'API que jQuery doit maîtriser

Le plug-in de téléchargement asynchrone d'aja

jQuery implémente la vérification de formulaire après une vérification multicouche

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!