Sự kiện onclick của phần tử html con bị chặn. làm thế nào để chinh phục?

Question

thể trùng lặp:
Prevent execution of parent event handler

tôi cần phải đính kèm các chức năng với các sự kiện onclick của divs thứ bậc.

Tôi có HTML này

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

bây giờ khi tôi bấm vào div bên trong event1() đang được gọi, và event2() không được gọi vì tôi nghĩ rằng jquery của tôi cắm khối nó.

Edited ::

thực tế khối Plugin của tôi những sự kiện nút đứa trẻ để event2() là không bao giờ được gọi như thế nào tôi có thể dừng lại?

Tôi đang sử dụng plugin jquery full callender: http://arshaw.com/fullcalendar/
và dưới đây là chức năng cấu hình của tôi đang được gọi trên 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

Bạn có thể thêm các xử lý sự kiện cho các yếu tố container và cung cấp một bộ chọn để chỉ sự kiện kích hoạt bởi các yếu tố đó khớp với bộ chọn đó sẽ gọi trình xử lý. Vì trình xử lý đang được gắn vào phần tử chứa, các phần tử con được thêm vào DOM sau đó sẽ vẫn gọi trình xử lý, nếu chúng khớp với bộ chọn.

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

Mã này sẽ tạo ra một xử lý sự kiện đó sẽ được kích hoạt trên các yếu tố mới được thêm vào các yếu tố div#wrapper. Trình xử lý nhấp chuột #adder sẽ thêm các phần tử mới vào trình bao bọc.

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

Điều quan trọng là việc sử dụng bộ chọn .inner khi xử lý click kiện được thêm vào $wrapper.

Thể hiện trong jsFiddle này.

Answer 2

Bạn cần dừng sự kiện được truyền sang phụ huynh. Sử dụng event.stopPropagation();

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

Answer 3

Hiệu ứng này là sự kiện tuyên truyền. Nội handler div nhấp chuột phải là chỉ như thế này để ngăn chặn tuyên truyền:

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

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

bản demo - http://jsfiddle.net/Qw92P/

Answer 4

Chỉ cần sử dụng một sự kiện nhấp chuột trên wrapper nhưng làm cho nó "sống".Phát hiện nếu các nhấp chuột đã thực sự trên đứa trẻ bằng cách sử dụng targetElement (hoặc là nó srcElement - bạn có thể tìm kiếm phần này).