.stopPropagation()太彻底了:/

Question

我有密码。基本上整个DIV是可点击的，但是我需要在这个DIV中的一个按钮来执行与其他DIV不同的功能，我已经尝试过.stopPropagation()，但是它太彻底了，因为它禁用了我试图在.CLICK()上运行的另一个函数。

问题中的按钮(在"+ add item“旁边)不幸地崩溃了，但仍然可以单击。您将看到它应该会触发一个灯箱，但它也会将产品添加到上面的DIV中。我只想点燃灯箱，但不想把产品添加到我的“篮子”里，有人能引导我朝正确的方向前进吗？我的代码在下面；

HTML:

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

CSS:

#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;}

JS:

$('#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();

我在这里放了一把小提琴:)

任何帮助都将不胜感激，因为我可能错过了显而易见的事实:/

Answer 1

同意了，因为彩色盒似乎依赖于事件冒泡，所以你实际上是被监听的，所以e.preventDefault()阻止了它的操作。直截了当地说，您可以拥有颜色框或防止单击事件冒泡，但不能两者兼而有之。

堆栈溢出搜索显示，其他人也遇到了同样的问题，尽管我找不到一个与您完全匹配的场景。

我尝试了各种方法，并提出了以下方法(也称为"hack")：

• 创建一个不可见的虚拟链接，以便打开颜色框。
• 将虚拟链接直接附加到文档主体，这样它就不会在有问题的"subProd“div中出现。
• 将事件处理程序附加到执行e.preventDefault()的"qv“链接，然后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');
});

演示

这似乎克服了眼前的问题。

根据您想要实现的目标，可能还需要进一步的工作，使着色盒与单击的特定"qv“相关联。如果这是一个问题，那么它也许更好地作为一个单独的问题处理。

Answer 2

处理这一问题的另一种方法是遵循以下方针：

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

Answer 3

Beetroot-Beetroot真的帮了我的忙，但是我不得不放弃了彩色盒的使用，所以为了和大家分享，我已经把代码修改成这样了；

var $dummyLink = $("a.qv").attr("href");
$("a.qv").on('click', function(e) {
    e.stopPropagation();
    $dummyLink.attr('href', this.href).trigger('click');
});

它对我来说是完美的，我希望它能帮助处于类似情况的人。