Question

可能重复：
Prevent execution of parent event handler

我需要将函数附加到分层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);
}

Answer 1

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

$(".inner").click(function(event){
   //do something
   event.stopPropagation();
});

Answer 2

您可以将事件处理程序添加到容器元素并提供选择器，以便只有与该选择器匹配的元素触发的事件才会调用处理程序。因为处理程序被附加到包含元素，所以稍后添加到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。

Answer 3

此效果是呼叫事件传播。内部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/

Answer 4

只需在包装器上使用一次单击事件，但将其设为“实时”。使用targetElement检测点击是否实际上在孩子身上（或者是srcElement - 你可以查看这部分）。

子html元素的onclick事件被阻止。如何征服？

4 个答案: