6

重複の可能性:
親イベント ハンドラーの実行を防止する

階層 div の onclick イベントに関数をアタッチする必要があります。

私はこのHTMLを持っています

<div onclick="event1()" class="wrapper">
main contents 
 <div  onclick="event2()"class="inner">
  inner contents
 </div>
</div>

内側の divevent1()をクリックすると呼び出され、jquery プラグインがブロックしていると思われるため、event2() は呼び出されません。

編集::

実際、私のプラグインは子ノードのイベントをブロックするので、event2() が呼び出されることはありません。どうすればそれを停止できますか?

私は jquery full callender plugin を使用しています: http://arshaw.com/fullcalendar/
以下は、onready で呼び出されている私の設定関数です。

function calenderEvents(events, account_id) {


    //Dynamically Set options as account type wise
    var selectable_opt = '';
    if (account_id == 'default') {
        selectable_opt = true;
    } else {
        selectable_opt = false;
    }

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: selectable_opt,
        selectHelper: true,
        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
            AfterMove(event);
        },
        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                var details = {
                    title: title,
                    start: start,
                    end: end,
                    allDay: allDay
                };
                $.post(SITE_URL + '/calendar/add-event', {
                    details: details
                }, function() {

                });
                calendar.fullCalendar('renderEvent', {
                    title: title,
                    start: start,
                    end: end,
                    allDay: allDay,
                }, true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },

        /*eventMouseover: function() {

            $('.fc-event-delete').css('display','block');   

        },
        eventMouseout: function() {
            $('.fc-event-delete').css('display','none');        
        },*/

        editable: true,
        events: events,
    });
    //}).limitEvents(2);
}
4

4 に答える 4

1

イベント ハンドラーをコンテナー要素に追加し、セレクターを提供して、そのセレクターに一致する要素によってトリガーされたイベントのみがハンドラーを呼び出すようにすることができます。ハンドラーはそれを含む要素にアタッチされているため、後で DOM に追加された子要素がセレクターと一致する場合は、引き続きハンドラーを呼び出します。

http://api.jquery.com/on/

このコードは、要素に追加された新しい要素でトリガーされるイベント ハンドラーを作成しますdiv#wrapper。クリック ハンドラーは#adder新しい要素をラッパーに追加します。

HTML

<div id="adder">click to add elements</div>

<div class="wrapper">
contents:
 <div class="inner">0</div>
</div>​

JS

var $inner = $('.inner').first(),
    $wrapper = $('.wrapper'),
    count = 0;

$wrapper.on('click', '.inner', function(e) {
    alert('click from ' + $(this).text());
});


$('#adder').on('click', function() {
    $wrapper.append($inner.clone().text(++count));
});

主なものは、イベント ハンドラーが に追加され.innerたときにセレクターを使用することです。click$wrapper

このjsFiddleに表示されます。

于 2012-12-28T11:05:11.070 に答える
1

親に伝播されるイベントを停止する必要があります。使用する event.stopPropagation();

$(".inner").click(function(event){
   //do something
   event.stopPropagation();
});
于 2012-12-28T10:32:24.240 に答える
0

この効果は、コール イベントの伝播です。内部 div クリック ハンドラーは、伝播を防ぐために次のようにする必要があります。

var event2 = function(event) {
    event = event || window.event;

    if (event.stopPropagation) {
        // for adequate browsers
        event.stopPropagation()
    } else {
        // for IE 
        event.cancelBubble = true
    }
}

デモ - http://jsfiddle.net/Qw92P/

于 2012-12-28T10:36:46.300 に答える
0

ラッパーでワンクリックイベントを使用するだけで、それを「ライブ」にします。クリックが実際に targetElement を使用して子で行われたかどうかを検出します (または srcElement であるかどうか - この部分を調べることができます)。

于 2012-12-28T11:07:49.753 に答える