jquery - .stopPropagation() は徹底的すぎる:/

Question

私はいくつかのコードを持っています。基本的に DIV 全体はクリック可能ですが、DIV の残りの部分とは異なる機能を実行するには、その DIV 内に 1 つのボタンが必要.stopPropagation()です.CLICK()。

問題のボタン (「+ アイテムを追加」の横にあります) は残念ながら折りたたまれていますが、まだクリック可能です。ライトボックスを起動することになっていることがわかりますが、その上の 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();

ここにフィドルを設定しました:)

私はおそらく明らかなものを見逃しているので、どんな助けも大歓迎です:/

score 5 · Accepted Answer

Agreed, you are effectively snookered since colorbox seems to rely on event bubbling, so e.preventDefault() blocks its action. Straightforwardly, you can have either colorbox or prevent the click event bubbling, but not both.

A stackoverflow search reveals that others have suffered the same problem though I can't find a scenario that precisely matches yours.

I tried various things and came up with the following approach (aka "hack") :

create an invisible dummy link for the purpose of opening the colorbox
append the dummy link directly to the document body so it not inside a problematic "subProd" div
attach an event handler to the "qv" links which does e.preventDefault(), e.stopPropagation() then transfers its href to the dummy link before triggering a click on it.

The code is surprisingly simple :

var $dummyLink = $("<a/>").colorbox().appendTo("body").hide();

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

DEMO

This seems to overcome the immediate issue.

Depending on what you are trying to achieve, there may be further work getting the colorbox to relate to the particular "qv" that was clicked. If that's an issue, then it's maybe better handled as a separate question.

score 1 · Accepted Answer

これにアプローチする別の方法は、次のとおりです。

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

score 0 · Accepted Answer

Beetroot-Beetroot はここで本当に役に立ちましたが、colorbox の使用をやめなければならなかったので、みんなと共有するために、コードをこれに変更しました。

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

それは私にとって完璧に機能します。同様の状況にある誰かを助けることができることを願っています.

jquery - .stopPropagation() は徹底的すぎる:/

3 に答える 3

Related

Reference