4

ネストされたクリックイベントを使用しています（画像が多数あり、子画像があるものとないものがあります）。

すべての画像（子、親、非親）をクリックすると、それらはdiff css divに表示され、もう一度クリックすると無期限に削除されます。

これまでのところ、このコードは親画像と非親画像で機能しますが、バブリングにより、子画像に代わりに親画像が表示されます。

子が機能する前にバブリングを停止するためにfalseを返すと、配列のさらに下にある親画像と非親画像の機能が壊れます（子はリストではなく新しいポップアップCSSにあります）が、バブリングを停止しません。ネストされたクリックイベントは実行されません。

誰かがこの混乱を回避する良い方法を見ますか？

// Click an image, and it will change it in the demo css class panel
$('.item-button').data('status','not_clicked');
$('.item-button').click(function(event) {
    var layerID = $(this).attr('data-layer'); //these do not correspond to actual layers of nesting.
    var itemID = $(this).attr('data-item');
    var itemmulti = $(this).attr('data-multi'); //this value def works to recognize parent from other non-parent items (not children).
    var clayerID = $(this).attr('data-clayer'); 
    var citemID = $(this).attr('data-citem');   //child item 1.

    if(( $(this).data('status') == 'clicked') || itemID == 0) {
        var imageSrc = $(this).parent().find('img').attr('id');
        $(layerID).attr('src', imageSrc);
    } else  {
        $(this).data('status','clicked');
        var imageSrc = $(this).parent().find('img').attr('id');
        $(layerID).attr('src', imageSrc);

        if (itemmulti != 0) {
            //begin headache.
            document.getElementById('child-' + itemID).style.display = "inline-block";

            //this is where a separate click function for children items begins.
            $('.item-sub1').data('status','unclicked');
            $('.item-sub1').click(function(event) {

            if(( $(this).data('status') == 'click') || citemID == 0) {
                var imageSrc = $(this).parent().find('img').attr('id');
                $(selector).attr('src', imageSrc);
            } else {
                $(this).data('status','click');
                var imageSrc = $(this).parent().find('img').attr('id');
                $(clayerID).attr('src', imageSrc);
            }
            return false;
            });
        }
    }
});

<img button title id alt />
<input radio id="layer-{ID}-{item.ID}-radio" name="layer-{ID}" value="{item.ID}" class="item-button" data-multi="{item.PARENT}" data-layer="{ID}" data-item="{item.ID}" />
<!-- IF item.CHILD1 != 0 -->
<div id="child-{item.ID}" style="width: 300px; position: absolute; display: none;">
    <img button here title data-layer="{item.CLAYER1}" data-item="{item.CHILD1}">
    <input radio id="layer-{item.CLAYER1}-{item.CHILD1}-radio" name="layer-{item.CLAYER1}" value="{item.CHILD1}" style="display: none;" class="item-sub1" data-clayer="{item.CLAYER1}" data-citem="{item.CHILD1}" />
4

1 に答える 1

4

イベントが DOM ツリーをバブリングし、親ハンドラーにイベントが通知されないようにするために必要なことは、stopPropagation()メソッドを使用することだと思います。

$('.item-button').click(function(event) {
     event.stopPropagation();
     // your code...

詳細情報: 1. jquery 2. javascript

于 2013-01-04T11:56:15.690 に答える