बाल HTML तत्व की ऑनक्लिक घटना अवरुद्ध है। जीतने के लिए कैसे?

Question

संभव डुप्लिकेट:
Prevent execution of parent event handler

मैं श्रेणीबद्ध divs की onclick घटनाओं के लिए कार्यों को संलग्न करने की जरूरत है।

मैं क्योंकि मुझे लगता है कि मेरी jQuery प्लगइन ब्लॉक यह इस HTML

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

अब कहा जा रहा है नहीं है जब मैं भीतरी div event1() बुलाया जा रहा है, और event2() पर क्लिक किया है।

संपादित ::

वास्तव में मेरे प्लगइन ब्लॉक चाइल्ड नोड घटनाओं तो event2() बुलाया जा रहा है कभी नहीं है मैं कैसे है कि रोक सकता है?

मैं jquery पूर्ण कॉलेंडर प्लगइन का उपयोग कर रहा हूं: http://arshaw.com/fullcalendar/
और नीचे मेरा कॉन्फ़िगरेशन फ़ंक्शन है जिसे पहले से ही कहा जा रहा है।

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

आप ईवेंट हैंडलर कंटेनर तत्व को जोड़ सकते हैं और एक चयनकर्ता तत्वों से शुरू हो रहा इसलिए केवल घटनाओं आपूर्ति कर सकते हैं कि मैच कि चयनकर्ता हैंडलर का आह्वान करेगा। चूंकि हैंडलर को तत्व तत्व से जोड़ा जा रहा है, इसलिए बाद में डीओएम में जोड़े गए बाल तत्व अभी भी हैंडलर को बुलाएंगे, अगर वे चयनकर्ता से मेल खाते हैं।

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

इस कोड को एक ईवेंट हैंडलर कि div#wrapper तत्व में जोड़े गए नए तत्व पर ट्रिगर किया जाएगा पैदा करेगा। #adder क्लिक हैंडलर रैपर में नए तत्व जोड़ देगा।

एचटीएमएल

<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 में दिखाया गया।

Answer 2

आपको पेरेंट को प्रचारित होने वाली घटना को रोकने की आवश्यकता है। उपयोग event.stopPropagation();

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

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

रैपर पर केवल एक क्लिक ईवेंट का उपयोग करें, लेकिन इसे "लाइव" बनाएं।यह पता लगाएं कि क्लिक वास्तव में लक्ष्य पर उपयोग कर बच्चे पर था (या यह srcElement है - आप इस भाग को देख सकते हैं)।