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

可能重複：
Prevent execution of parent event handler 子元素的onclick事件被阻止。如何征服？

我需要附加的功能分層的div的onclick事件。

我有這樣的HTML

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

現在，當我在內層的div event1()被調用，事件2（）點擊不會被調用，因爲我覺得我的jQuery插件，阻止它。

編輯::

其實我的插件模塊的子節點事件，以便事件2（）永遠不會被調用我怎樣才能停止？

我正在使用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); 
}

來源

2012-12-28 Ekta Patel

@FelixKling實際上並不是因爲我的jquery plugim生成html，我需要在每個日期添加一些鏈接，但是當時我沒有控制，因爲在生成時沒有在DOM中，所以無法使用您發現的代碼simillar 。我只是在尋找一些像inc-z-index或其他任何可以做這些東西的東西 –

什麼插件？你可以與我們分享你的代碼嗎？ jsfiddle會很棒。 –

@RuslanPolutsygan我已經使用Jquery full callender插件，這裏是鏈接http://arshaw.com/fullcalendar/ –

您可以將事件處理程序添加到容器元素，並提供一個選擇所以只能通過元素觸發事件匹配該選擇器將調用處理程序。由於處理程序正在附加到包含元素，因此稍後添加到DOM的子元素仍將調用處理程序（如果它們與選擇器匹配）。

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

此代碼將創建一個事件處理程序，將上被添加到div#wrapper元素的新元素被觸發。點擊處理程序將向包裝添加新元素。

HTML

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

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

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-28 11:05:11 tiffon

+1。我會看到它，如果解決了我的問題將接受你的答案。謝謝。 –

您需要停止傳播給父級的事件。使用event.stopPropagation();

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

來源

2012-12-28 10:32:24

一些如何根據我的例子event2沒有被調用。 ehat可以是 –

這種效果是呼叫事件的傳播。內格單擊處理程序必須是就這樣，以防止傳播：

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-28 10:36:46

我已經得到了一些東西，並更新了我的問題，你可以請求更接近我的問題 –

只需使用一個點擊事件的包裝，但使其「活」。檢測點擊是否實際在使用targetElement的孩子上（或者是srcElement - 你可以查看這個部分）。

來源

2012-12-28 11:07:49 ErikE

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

回答

相關問題