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 : ·

e849e780724ad7e3d96667dbe71b15d8
d13c37413a3b74a6f638c2bd0a192e36
e625d1e300d7d5c06d09121b24123e42testbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

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 3499910bf9dac5ae3c52d5ede7383485, le bouton de soumission 54b28e0e73a12e4a8ed487872a6fb5b8, 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 3499910bf9dac5ae3c52d5ede7383485 est de sauter à la page spécifiée. Prenons-le comme exemple pour l'empêcher de sauter :

//假定有链接108bdfb517e761bb879be093c0040de3caibaojian.com5db79b134e9f6b82c0b36e0489ee08ed
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

189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac237316d85963b455defc45a0e7b4a3d9b74ebecaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
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 
189abb41602d7abb5d5cced596eb4786
9a890ec87bb66ce61544c585573e657b
50ca1a0a17a7c2bd4f0d183bac2373169e974483976d37374c9db7635fc7fceacaibaojian.com5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
$("#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!