Maison >interface Web >js tutoriel >La méthode d'implémentation spécifique pour empêcher l'ajout d'événements dans js

La méthode d'implémentation spécifique pour empêcher l'ajout d'événements dans js

怪我咯original: 2017-07-06 11:35:391897parcourir

Vous pouvez utiliser e.stopPropagation(); e.preventDefault(); pour empêcher l' événement de bouillonner et l'exécution de l'événement par défaut. Mais cela ne peut pas empêcher l'ajout d'événements. Si vous souhaitez en ajouter, veuillez consulter la méthode d'implémentation ci-dessous

Parfois, vous pouvez utiliser e.stopPropagation(); e.preventDefault(); des événements par défaut. Mais cela ne peut pas empêcher l’ajout de l’événement.

Dans quelles circonstances doit-on empêcher l'ajout d'événements ?

Par exemple :

Cliquez sur « Commander ». Lorsque vous effectuez cette opération, le paiement lui-même a son propre événement, mais vous devez déterminer si vous devez vous connecter avant de procéder au paiement.

Nous pourrions écrire comme ceci :

Code Js

Le code est le suivant :

if(isLogin){ //判断是否登录 
console.log("没有登录") 
}else{ 
//结账相关代码 
}
如果点击“我的主页”也有登录判断
登录判断代码
if(isLogin){ //判断是否登录 
console.log("没有登录") 
}else{ 
//个人中心 
}

S'il y a plus de jugements de connexion . Y aura-t-il plus de code comme celui ci-dessus ? Plus tard, j'ai découvert la méthode stopImmediatePropagation() pour empêcher l'ajout d'événements. Le problème ci-dessus n'est plus un problème.

Important : assurez-vous que l'événement de jugement de connexion est le premier événement lié.

Code démo

Le code est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>demo</title> 
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> 
</head> 
<body> 

<a href="#" class="bill isLogin">结账 </a> 


<ul> 
<li class="a1 isLogin">加入收藏夹</li> 
<li class="a2 isLogin">他人支付</li> 
<li>加入购入车</li> 
<li class="a4 isLogin">我的主页</li> 
</ul> 

<script> 
//最先绑定 
$(".isLogin").on("click", function (e) { 

if(true){ //登录判断 
alert("没有登录"); 
e.stopImmediatePropagation(); 
} 

return false; 
}); 

$(".bill").on("click",function(){ 
alert("结账相关内容！"); 
}); 

$(".a1").on("click",function(){ 
alert("a1"); 
}); 

$(".a2").on("click",function(){ 
alert("a2"); 
}); 

$(".a3").on("click",function(){ 
alert("已加入购物车"); 
}); 

$(".a4").on("click",function(){ 
alert("有登录判断"); 
}); 


</script> 
</body> 
</html>

En fait, jquery nous offre un moyen de visualiser les événements $._data($( '.isLogin' ).get(0)), ouvrez firebug et entrez dans la console.
Code Js

$._data($('.isLogin').get(0))

verra ce qui suit :

Code Js

Object { events={...}, handle=function()}

Cliquez pour voir l'événement array pour une visualisation facile des liaisons sur les éléments Quel genre d'événement s'est produit.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js implémentation d'un exemple de code d'effets spéciaux à incrément numériqueArticle suivant：js implémentation d'un exemple de code d'effets spéciaux à incrément numérique

Articles Liés

Voir plus