6

可能重复：
阻止执行父事件处理程序

我需要将函数附加到分层 div 的 onclick 事件。

我有这个 HTML

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

现在当我点击内部 div 时event1()，正在调用，并且 event2() 没有被调用，因为我认为我的 jquery 插件阻止了它。

编辑::

实际上我的插件阻止了子节点事件，所以 event2() 永远不会被调用我怎么能阻止它？

我正在使用 jquery full callender 插件：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

您需要停止将事件传播到父级。采用 event.stopPropagation();

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

You can add the event handler to the container element and supply a selector so only events triggered by elements that match that selector will invoke the handler. Because the handler is being attached to the containing element, child elements that are added to the DOM later will still invoke the handler, if they match the selector.

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

This code will create an event handler that will be triggered on new elements that are added to the div#wrapper element. The #adder click handler will add new elements to the wrapper.

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

The main thing is the use of the .inner selector when the click event handler is added to $wrapper.

Shown in this jsFiddle.

于 2012-12-28T11:05:11.070 回答
0

This effect is call event propagation. Inner div click handler has to be just like this to prevent propagation:

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

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

demo - http://jsfiddle.net/Qw92P/

于 2012-12-28T10:36:46.300 回答
0

Just use one click event on the wrapper but make it "live". Detect if the click was actually on the child using targetElement (or is it srcElement--you can look up this part).

于 2012-12-28T11:07:49.753 回答