Comment arrêter le bouillonnement et empêcher le comportement par défaut du navigateur dans js

 <br>

Compatible avec les événements

function myfn(e){ var evt = e ? e:window.event; }

js arrête de bouillonner

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();
}

Empêcher le La méthode de bouillonnement

w3c est e.stopPropagation(), et IE utilise e.cancelBubble = true

stopPropagation est également une méthode de l'objet événement (Event). La fonction est d'empêcher l'événement de bouillonnement de l'élément cible, mais n'empêchera pas le comportement par défaut. 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 ci-dessus, la démo est la suivante Lorsque nous cliquons sur test, alert("li"), alert("ul"), alert("div"). sera déclenché en séquence, c'est un événement bouillonnant.

• Test de bouillonnement

Empêcher le bouillonnement

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

• Arrêtez de bouillonner

Empêcher le comportement par défaut

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

preventDefault, qui 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 return 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 l'objet de bouillonner.

Ce qui suit utilise du js natif, qui empêchera uniquement le comportement par défaut et n'arrêtera pas 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 est une démonstration utilisant
jQuery pour à la fois empêcher le comportement par défaut et arrêter le bouillonnement

//code from 
<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;
});

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

• caibaojian.com

Résumé d'utilisation

Lorsque vous devez arrêter le comportement de bouillonnement, vous pouvez utiliser

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

Lorsque vous devez empêcher le comportement par défaut, vous pouvez utiliser

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

Points d'attention de l'événement

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

2. l'objet événement n'est valable 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 le biais 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.

1. Les deux phrases suivantes ont le même effet :

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

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!