实时方法的jQuery stopPropagation问题 [英] jquery stopPropagation problem with live method

查看：69
本文介绍了实时方法的jQuery stopPropagation问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

jQuery stopPropagation方法不适用于live方法.在代码下方，可以使用click(而不是live方法)很好地工作.任何帮助，不胜感激.

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jquery Propagation and preventDetauls Example for Popup</title>
<style type="text/css">
 .icon.white{background:#FFFFFF;}
 .icon{-moz-border-radius:2px 2px 2px 2px;-moz-box-shadow:0 1px 2px #EAEDF4;background-color:#FFFFFF;border:1px solid #E4E8F1;float:left;margin:0 1% 1% 0;text-align:center;}
 .iconlinks{height:20px;}
 .info{float:right;}
 .icon a.infolink, .downloadlinks a, .iconza a.changecolor {color:#718DB5;display:block;font-size:10px;padding:4px 7px;text-decoration:none;}
 .icon .infolink {background-image:url(images/dwn-arrow.gif);background-position:35px center;background-repeat:no-repeat;padding-right:17px !important;position:relative;}
 .downloadlinks{float:left;width:130px;overflow:hidden;}
 .downloadlinks a{float:left;}
 .infolink:hover{background-image:url(images/arrow-white.gif);}
 .infolink:hover{background-color: #1f75cc;color: white !important;text-decoration: none !important;}
 .infolink.selected{z-index: 100;color: white !important;background-color: #1f75cc !important;background-image: url(images/arrow-white.gif) !important;}
 .icon-image{border:0px;}
 .service-name{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:24px;color:#74767A;margin:3px;text-align:left;}
 .describe-icons{position:absolute;right:2px;bottom:2px;}
 .infomenu{text-align:left;margin-left:-150px;margin-top:-1px;position:absolute;width:260px;-moz-box-shadow:2px 2px 5px #2F3B4A;background-color:#FFFFFF;border:2px solid #1F75CC;z-index:50;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $(document).click(function(){
   $("a.infolink").removeClass("selected");
   $("div.infomenu").hide();
  });
  $("a.infolink").live("click",function(e){
   $("a.infolink").removeClass("selected");
   $("div.infomenu").hide();
   $(this).addClass("selected");
   $(this).next().show();
   e.stopPropagation();
  });
  $("div.infomenu").live("click",function(e){
   e.stopPropagation();
   //e.preventDefault();
  });
  $("input.clickme").click(function(e){
   alert("I am fired");
  });
 });
</script>
</head>
<body>
<div id="tserviceslist" style="margin:25px;">         
 <div style="height: 178px; width: 178px;" id="icon-12608" class="icon white">            
  <div class="iconlinks">    
   <div class="info">
    <a href="#" class="infolink"  title="Click here to see more information about this Services." rel="nofollow">INFO</a>              
    <div id="infomenu-12608" class="infomenu" style="display: none;"><input type="button" value="clickme" class="clickme" />Information will come here</div>
   </div>
   <div class="downloadlinks">
    <h3 class="service-name">Cricket</h3>            
   </div>
  </div>
  <br />

 </div>        


</div>
</body>
</html>

谢谢你， 肯定的人.

解决方案

您只需要稍微更改处理程序的顺序，并使用/检查传播停止，如下所示:

$("a.infolink").live("click",function(e){
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
    $(this).addClass("selected");
    $(this).next().show();
    e.stopPropagation();
});
$("div.infomenu").live("click",function(e){
    e.stopPropagation();
});
$(document).click(function(e){
    if(e.isPropagationStopped()) return;  //important, check for it!
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
});
$("input.clickme").click(function(e){
    alert("I am fired");
});​

在此处尝试，需要牢记一些重要点:

  • .live() 处理程序位于document
  • 事件处理程序按照它们绑定到任何给定元素的顺序执行

由于我们处于同一级别，因此您需要停止并检查传播. .stopPropagation() 可以防止气泡继续上升，但这没关系，这是处于同一级别，因此您需要使用 .isPropagationStopped() .另外，由于处理程序按顺序触发，因此您需要在其他事件处理程序之后绑定document.onclick ，否则它将首先执行，然后其他事件处理程序将停止传播.

Jquery stopPropagation method dosen't work with live method. Below the code is works fine with click instead of live method. Any help greatly appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jquery Propagation and preventDetauls Example for Popup</title>
<style type="text/css">
 .icon.white{background:#FFFFFF;}
 .icon{-moz-border-radius:2px 2px 2px 2px;-moz-box-shadow:0 1px 2px #EAEDF4;background-color:#FFFFFF;border:1px solid #E4E8F1;float:left;margin:0 1% 1% 0;text-align:center;}
 .iconlinks{height:20px;}
 .info{float:right;}
 .icon a.infolink, .downloadlinks a, .iconza a.changecolor {color:#718DB5;display:block;font-size:10px;padding:4px 7px;text-decoration:none;}
 .icon .infolink {background-image:url(images/dwn-arrow.gif);background-position:35px center;background-repeat:no-repeat;padding-right:17px !important;position:relative;}
 .downloadlinks{float:left;width:130px;overflow:hidden;}
 .downloadlinks a{float:left;}
 .infolink:hover{background-image:url(images/arrow-white.gif);}
 .infolink:hover{background-color: #1f75cc;color: white !important;text-decoration: none !important;}
 .infolink.selected{z-index: 100;color: white !important;background-color: #1f75cc !important;background-image: url(images/arrow-white.gif) !important;}
 .icon-image{border:0px;}
 .service-name{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:24px;color:#74767A;margin:3px;text-align:left;}
 .describe-icons{position:absolute;right:2px;bottom:2px;}
 .infomenu{text-align:left;margin-left:-150px;margin-top:-1px;position:absolute;width:260px;-moz-box-shadow:2px 2px 5px #2F3B4A;background-color:#FFFFFF;border:2px solid #1F75CC;z-index:50;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $(document).click(function(){
   $("a.infolink").removeClass("selected");
   $("div.infomenu").hide();
  });
  $("a.infolink").live("click",function(e){
   $("a.infolink").removeClass("selected");
   $("div.infomenu").hide();
   $(this).addClass("selected");
   $(this).next().show();
   e.stopPropagation();
  });
  $("div.infomenu").live("click",function(e){
   e.stopPropagation();
   //e.preventDefault();
  });
  $("input.clickme").click(function(e){
   alert("I am fired");
  });
 });
</script>
</head>
<body>
<div id="tserviceslist" style="margin:25px;">         
 <div style="height: 178px; width: 178px;" id="icon-12608" class="icon white">            
  <div class="iconlinks">    
   <div class="info">
    <a href="#" class="infolink"  title="Click here to see more information about this Services." rel="nofollow">INFO</a>              
    <div id="infomenu-12608" class="infomenu" style="display: none;"><input type="button" value="clickme" class="clickme" />Information will come here</div>
   </div>
   <div class="downloadlinks">
    <h3 class="service-name">Cricket</h3>            
   </div>
  </div>
  <br />

 </div>        


</div>
</body>
</html>

Thanking you, sureace.

解决方案

You just need to change the order of your handlers a bit, and use/check for propagation stopping, like this:

$("a.infolink").live("click",function(e){
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
    $(this).addClass("selected");
    $(this).next().show();
    e.stopPropagation();
});
$("div.infomenu").live("click",function(e){
    e.stopPropagation();
});
$(document).click(function(e){
    if(e.isPropagationStopped()) return;  //important, check for it!
    $("a.infolink").removeClass("selected");
    $("div.infomenu").hide();
});
$("input.clickme").click(function(e){
    alert("I am fired");
});​

Give it a try here, there are a few important points to keep in mind:

  • .live() handlers are on document
  • Event handlers execute in the order they were bound to any given element

You need to stop and check the propagation since we're at the same level. .stopPropagation() would prevent the bubbling from going any higher but that doesn't matter, it's at the same level in the DOM, so you need to check if it was stopped, using .isPropagationStopped(). Also, since the handlers fire in order, you need to bind that document.onclick after your other event handlers, otherwise it'll execute first, before the others tried to stop propagation.

这篇关于实时方法的jQuery stopPropagation问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆