Jquery .stopPropagation（）太彻底了：/
我有一些密码。基本上，整个DIV都是可单击的，但我需要该DIV中的一个按钮来执行与该DIV其余部分不同的功能，我已经尝试了Jquery .stopPropagation（）太彻底了：/,jquery,click,lightbox,colorbox,Jquery,Click,Lightbox,Colorbox,我有一些密码。基本上，整个DIV都是可单击的，但我需要该DIV中的一个按钮来执行与该DIV其余部分不同的功能，我已经尝试了.stopPropagation（），但它太彻底了，因为它禁用了我尝试运行的另一个功能.CLICK（） 有问题的按钮（在“+添加项”旁边）不幸折叠，但仍然可以单击。你会看到它应该点燃一个灯箱，但它也会将产品添加到上面的DIV中。我只想点燃灯箱，但不想将产品添加到我的“篮子”中，有人能引导我朝着正确的方向前进吗？我的代码如下 HTML: <form method="pos
.stopPropagation（）.CLICK（）<form method="post" id="partnumbers" name="partnumbers" action="formHandler">
<div id="specialOffer">
<ul>
<li>
<div id="prodD">
<input type="hidden" name="partNum_1" id="catnum1" value="" />
<div id="close" style="display:none;"><a href="#">Remove X</a></div>
<div id="Prod1"></div>
</div>
</li>
<li>
<div id="prodO">
<input type="hidden" name="partNum_2" id="catnum2" value="" />
<div id="close" style="display:none;"><a href="#">Remove X</a></div>
<div id="Prod2"></div>
</div>
</li>
<li>
<div id="prodA">
<input type="hidden" name="partNum_3" id="catnum3" value="" />
<div id="close" style="display:none;"><a href="#">Remove X</a></div>
<div id="Prod3"></div>
</div>
</li>
<li>
<div id="prodSubmit">
<input name="Submit" id="Submit" type="submit" value="Submit" />
</div>
</li>
</ul>
</div>
<div id="flyout1">
<ul class="paginate-1">
<li><div id="subProd" class="9059863">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9087361">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9087378">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9087354">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9059791">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
</ul>
</div>
</form>
#specialOffer, #flyout1, #flyout2, #flyout3 {margin:0; padding:0; width:990px; overflow:hidden;}
#specialOffer {padding:10px 0 0 20px;}
#flyout1 {background:transparent url(../images/popupBG0.png) top left no-repeat;}
#specialOffer UL, UL.paginate-1, UL.paginate-2, UL.paginate-3 {
float:left;
margin:0; padding:0;
height:260px;
display:block;
}
#specialOffer UL {width:970px;}
#specialOffer UL, UL.paginate-3 {
height:270px;
}
#specialOffer UL LI, UL.paginate-1 LI, UL.paginate-2 LI, UL.paginate-3 LI {
float:left;
margin:30px 30px 0 27px; padding:0;
display:inline;
width:130px;
height:200px;
}
#specialOffer UL LI {
height:220px;
}
#scrollable {
margin-top:10px;
float:left;
background-color:#eee;
width:990px;
border-top: 1px;
border-top-color: #CCC;
border-top-style: solid;
}
.pager {
margin-right:10px;
overflow:hidden;
padding:1em 0;
float:right;
}
.pager li{
float:left;
list-style-type:none;
margin-right:.3em;
font-size:1.1em;
}
.pager a{
color:#FF9182;
outline:none;
text-decoration:underline;
}
.pager a:hover{
text-decoration:none;
}
.pager .active a {
color:#666;
font-weight:bold;
}
.pager .disabled {
width:32px;
text-indent:-9999px;
}
/* Needed for carousel*/
.flexiwrap {
margin:0 0 0 20px; padding:0;
float:left;
width:970px;
height:271px;
}
/* PAGINATED CONTENT */
#Prod1, #Prod2, #Prod3, #subProd {float:left; margin:0; padding:0; width:130px;}
#Prod4 {float:left; margin:0; padding:0; width:130px;}
#Prod1 img.thumb, #Prod2 img.thumb,
#Prod3 img.thumb, #subProd img.thumb {
margin:0; padding:0 10px;
background-color:#fff;
border:1px solid #ccc;
}
.button, .qv {
float:left;
background-image: linear-gradient(#ffffff, #eeeeee);
border: 1px solid #ccc;
border-radius: 3px;
color: #666;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 17px;
padding: 5px 10px;
text-decoration:none;
overflow: visible;
}
.qv {
z-index:9999px;
}
#Prod1 .qv, #Prod2 .qv,
#Prod3 .qv, #subProd .qv {
float:right;
margin:0;
padding:0;
cursor: pointer;
padding:5px 5px 0px 6px;
}
#Prod1 .qv IMG, #Prod2 .qv IMG,
#Prod3 .qv IMG, #subProd .qv IMG {
border:0 none;
margin:0; padding:0;
}
#Prod1 .product P, #Prod2 .product P,
#Prod3 .product P, #subProd .product P {margin:5px 0; padding:0; line-height:13px;}
#Prod1 .product .title, #Prod2 .product .title,
#Prod3 .product .title, #subProd .product .title {color:#666; font-size:13px;}
#Prod1 .product .number, #Prod2 .product .number,
#Prod3 .product .number, #subProd .product .number {color:#666; font-size:11px;}
#Prod1 .product .price, #Prod2 .product .price,
#Prod3 .product .price, #subProd .product .price {
font-size:20px;
font-weight:bold;
margin-bottom:3px;
line-height:20px;
}
#close {margin-top:-15px;}
#close a {float:right; margin:0; padding:0; text-decoration:none;}
#Prod1, #Prod2, #Prod3 {border:1px solid #ccc; height:110px; cursor:pointer;}
#prodDoll INPUT, #prodOutfit INPUT, #prodAcc INPUT {display:none;}
#Prod4 {float:left; margin:0; padding:0; width:130px; height:110px; cursor:pointer;}
#subProd {cursor: pointer;}
$('#flyout1').hide();
$('#prodSubmit').hide();
$('#flyout1 #subProd').click(function() {
var id1 = $(this).attr('class');
$("#catnum1").val(id1);
$("#Prod1").html($("." + $(this).attr('class')).html());
$("#Prod1").css("border", "none");
$("#prodD #close").css("display", "block");
$("#prodD .button, #prodD .qv").css("display", "none");
$("#Prod1").attr('rel', 'done');
});
$("#prodD #close a").click(function() {
$("#prodD #close").css("display", "none");
$("#Prod1").empty();
$("#Prod1").css("border", "1px solid #CCC");
$("#Prod1").removeAttr("rel")
});
$("#Prod1").on("click",function(){
$("#flyout1").slideToggle();
});
$("a.qv").click(function(e) { e.stopPropagation(); });
$("a.qv").colorbox();
<form method="post" id="partnumbers" name="partnumbers" action="formHandler">
<div id="specialOffer">
<ul>
<li>
<div id="prodD">
<input type="hidden" name="partNum_1" id="catnum1" value="" />
<div id="close" style="display:none;"><a href="#">Remove X</a></div>
<div id="Prod1"></div>
</div>
</li>
<li>
<div id="prodO">
<input type="hidden" name="partNum_2" id="catnum2" value="" />
<div id="close" style="display:none;"><a href="#">Remove X</a></div>
<div id="Prod2"></div>
</div>
</li>
<li>
<div id="prodA">
<input type="hidden" name="partNum_3" id="catnum3" value="" />
<div id="close" style="display:none;"><a href="#">Remove X</a></div>
<div id="Prod3"></div>
</div>
</li>
<li>
<div id="prodSubmit">
<input name="Submit" id="Submit" type="submit" value="Submit" />
</div>
</li>
</ul>
</div>
<div id="flyout1">
<ul class="paginate-1">
<li><div id="subProd" class="9059863">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9087361">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9087378">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9087354">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
<li><div id="subProd" class="9059791">
<img class="thumb" src="images/placeholder.jpg" width="110" height="110" />
<span class="product">
<p class="title">PRODUCT TITLE</p>
<p class="number">PARTnum</p>
<p class="price">Price</p>
</span>
<a href="#" class="button">+ Add item</a>
<a href="http://www.google.co.uk" class="qv"><img src="images/qv.png" width="17" height="17" /></a>
</div></li>
</ul>
</div>
</form>
#specialOffer, #flyout1, #flyout2, #flyout3 {margin:0; padding:0; width:990px; overflow:hidden;}
#specialOffer {padding:10px 0 0 20px;}
#flyout1 {background:transparent url(../images/popupBG0.png) top left no-repeat;}
#specialOffer UL, UL.paginate-1, UL.paginate-2, UL.paginate-3 {
float:left;
margin:0; padding:0;
height:260px;
display:block;
}
#specialOffer UL {width:970px;}
#specialOffer UL, UL.paginate-3 {
height:270px;
}
#specialOffer UL LI, UL.paginate-1 LI, UL.paginate-2 LI, UL.paginate-3 LI {
float:left;
margin:30px 30px 0 27px; padding:0;
display:inline;
width:130px;
height:200px;
}
#specialOffer UL LI {
height:220px;
}
#scrollable {
margin-top:10px;
float:left;
background-color:#eee;
width:990px;
border-top: 1px;
border-top-color: #CCC;
border-top-style: solid;
}
.pager {
margin-right:10px;
overflow:hidden;
padding:1em 0;
float:right;
}
.pager li{
float:left;
list-style-type:none;
margin-right:.3em;
font-size:1.1em;
}
.pager a{
color:#FF9182;
outline:none;
text-decoration:underline;
}
.pager a:hover{
text-decoration:none;
}
.pager .active a {
color:#666;
font-weight:bold;
}
.pager .disabled {
width:32px;
text-indent:-9999px;
}
/* Needed for carousel*/
.flexiwrap {
margin:0 0 0 20px; padding:0;
float:left;
width:970px;
height:271px;
}
/* PAGINATED CONTENT */
#Prod1, #Prod2, #Prod3, #subProd {float:left; margin:0; padding:0; width:130px;}
#Prod4 {float:left; margin:0; padding:0; width:130px;}
#Prod1 img.thumb, #Prod2 img.thumb,
#Prod3 img.thumb, #subProd img.thumb {
margin:0; padding:0 10px;
background-color:#fff;
border:1px solid #ccc;
}
.button, .qv {
float:left;
background-image: linear-gradient(#ffffff, #eeeeee);
border: 1px solid #ccc;
border-radius: 3px;
color: #666;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 17px;
padding: 5px 10px;
text-decoration:none;
overflow: visible;
}
.qv {
z-index:9999px;
}
#Prod1 .qv, #Prod2 .qv,
#Prod3 .qv, #subProd .qv {
float:right;
margin:0;
padding:0;
cursor: pointer;
padding:5px 5px 0px 6px;
}
#Prod1 .qv IMG, #Prod2 .qv IMG,
#Prod3 .qv IMG, #subProd .qv IMG {
border:0 none;
margin:0; padding:0;
}
#Prod1 .product P, #Prod2 .product P,
#Prod3 .product P, #subProd .product P {margin:5px 0; padding:0; line-height:13px;}
#Prod1 .product .title, #Prod2 .product .title,
#Prod3 .product .title, #subProd .product .title {color:#666; font-size:13px;}
#Prod1 .product .number, #Prod2 .product .number,
#Prod3 .product .number, #subProd .product .number {color:#666; font-size:11px;}
#Prod1 .product .price, #Prod2 .product .price,
#Prod3 .product .price, #subProd .product .price {
font-size:20px;
font-weight:bold;
margin-bottom:3px;
line-height:20px;
}
#close {margin-top:-15px;}
#close a {float:right; margin:0; padding:0; text-decoration:none;}
#Prod1, #Prod2, #Prod3 {border:1px solid #ccc; height:110px; cursor:pointer;}
#prodDoll INPUT, #prodOutfit INPUT, #prodAcc INPUT {display:none;}
#Prod4 {float:left; margin:0; padding:0; width:130px; height:110px; cursor:pointer;}
#subProd {cursor: pointer;}
$('#flyout1').hide();
$('#prodSubmit').hide();
$('#flyout1 #subProd').click(function() {
var id1 = $(this).attr('class');
$("#catnum1").val(id1);
$("#Prod1").html($("." + $(this).attr('class')).html());
$("#Prod1").css("border", "none");
$("#prodD #close").css("display", "block");
$("#prodD .button, #prodD .qv").css("display", "none");
$("#Prod1").attr('rel', 'done');
});
$("#prodD #close a").click(function() {
$("#prodD #close").css("display", "none");
$("#Prod1").empty();
$("#Prod1").css("border", "1px solid #CCC");
$("#Prod1").removeAttr("rel")
});
$("#Prod1").on("click",function(){
$("#flyout1").slideToggle();
});
$("a.qv").click(function(e) { e.stopPropagation(); });
$("a.qv").colorbox();
任何帮助都将不胜感激，因为我可能错过了显而易见的：//p>同意，因为colorbox似乎依赖于事件冒泡，所以
e.preventDefault（）- 创建一个不可见的虚拟链接以打开颜色框
- 将虚拟链接直接附加到文档体，使其不在有问题的“subpd”div中
- 将事件处理程序附加到“qv”链接，该链接执行
，e.preventDefault（）
，然后将其e.stopPropagation（）
传输到虚拟链接，然后再触发对其的单击href
var $dummyLink = $("<a/>").colorbox().appendTo("body").hide();
$("a.qv").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$dummyLink.attr('href', this.href).trigger('click');
});
var$dummyLink=$（“
这似乎克服了眼前的问题
根据您试图实现的目标，可能还有更多的工作要做，以使色盒与单击的特定“qv”相关联。如果这是一个问题，那么最好将其作为一个单独的问题来处理。同意，因为色盒似乎依赖于事件冒泡，所以e.preventDefault（）
阻止它的动作。简单地说，您可以使用colorbox或阻止click事件冒泡，但不能同时使用两者
stackoverflow搜索显示，其他人也遇到了同样的问题，尽管我找不到与您的情况完全匹配的方案
我尝试了各种方法，并提出了以下方法（又名“黑客”）：
- 创建一个不可见的虚拟链接以打开颜色框
- 将虚拟链接直接附加到文档体，使其不在有问题的“subpd”div中
- 将事件处理程序附加到“qv”链接，该链接执行
e.preventDefault（）
，e.stopPropagation（）
，然后将其href
传输到虚拟链接，然后再触发对其的单击
代码非常简单：
var $dummyLink = $("<a/>").colorbox().appendTo("body").hide();
$("a.qv").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$dummyLink.attr('href', this.href).trigger('click');
});
var$dummyLink=$（“
这似乎克服了眼前的问题
根据您试图实现的目标，可能还有进一步的工作，使颜色框与特定的“qv”相关点击了。如果这是一个问题，那么最好把它作为一个单独的问题来处理。甜菜根在这里确实帮助了我，但我不得不放弃使用colorbox，所以为了与大家分享，我将代码改成了这个
var $dummyLink = $("a.qv").attr("href");
$("a.qv").on('click', function(e) {
e.stopPropagation();
$dummyLink.attr('href', this.href).trigger('click');
});
它非常适合我，我希望它能帮助处于类似情况的人。甜菜根在这里确实帮助了我，但我不得不放弃colorbox的使用，所以为了与大家分享，我将代码改成了这个
var $dummyLink = $("a.qv").attr("href");
$("a.qv").on('click', function(e) {
e.stopPropagation();
$dummyLink.attr('href', this.href).trigger('click');
});
它对我来说非常有效，我希望它能帮助处于类似情况的人。另一种方法是：
$('.parent').once().on('click', function(e){
// Don't apply if child link was clicked on.
if (!$(e.target).is('.child')) {
// Background click action
}
});
$('.child').on('click', function(){
// Child click action i.e. colorbox action
});
另一种方法是：
$('.parent').once().on('click', function(e){
// Don't apply if child link was clicked on.
if (!$(e.target).is('.child')) {
// Background click action
}
});
$('.child').on('click', function(){
// Child click action i.e. colorbox action
});
很难看出您在寻找什么，您应该发布一个简单的案例来重现您的问题
不应该是必需的。为了附加事件处理程序，所有可单击的元素都应该是可独立选择的，而不必担心冒泡。@ashish我最初确实尝试过，但没有什么区别，它仍然将产品添加到上面的空DIV中并触发lightbox://@JSFiddle复制了问题（只需使用.stopPropagation（）即可） away@Beetroot-Beetroot：问题就出在这里。整个DIV需要是可选择的，因为它将自己复制到上面的一个空字段中，'a.qv'可以工作，但工作得太好了，所以我需要一种方法来关闭复制，但仍然启用我的lightbox:/it’很难看到你在寻找什么，你应该发布一个简单的HTML提示stopPropagation（）
不应该是必需的。为了附加事件处理程序，所有可单击的元素都应该是可独立选择的，而不必担心冒泡。@ashish我最初确实尝试过，但没有什么区别，它仍然将产品添加到上面的空DIV中并触发lightbox://@JSFiddle复制了问题（只需使用.stopPropagation（）即可） away@Beetroot-贝特鲁特：问题就在这里。整个DIV需要是可选择的，因为它将自身复制到上面的一个空字段中，'a.qv'可以工作，但工作得太好了，所以我需要一种方法来关闭复制，但仍然启用我的lightbox:/先生，你是个天才！我已经研究这个问题好几天了，我我是我工作的唯一能做到这一点的人，我依靠StackOverflow这样的社区寻求帮助，因为没有其他人帮助我：/摆脱$dummyLink，选择url=$（this.attr（'href'）；window.open（url）；
@Duncanmoo，