ngăn chặn sự kiện bắn cho chồng chéo các phần tử HTML

Question

Vì vậy, tôi đã có hai yếu tố, một lồng bên trong khác

<div id="outer"> 
    <div id="inner"> 
     <p>Lorem Ipsum</p> 
    </div> 
</div> 

Các thùng chứa bên ngoài là lớn hơn so với bên trong, ảnh hưởng một cách bố trí lớp phương thức. Tôi muốn đăng ký một sự kiện bấm trên bề mặt tiếp xúc của bên ngoài mà sẽ gây ra cả hai được loại bỏ, nhưng tôi không muốn điều này xảy ra nếu bạn bấm vào div bên trong.

Tôi đang sử dụng jQuery delegate/stopPropagation và cố gắng thẩm vấn phần tử để đảm bảo đó là div bên ngoài, nhưng không có kết quả - nó vẫn nhận được sự kiện bên ngoài. Tôi đang xem xét tay quây trong một khu vực hit bên ngoài div bên trong, nhưng tôi muốn biết nếu có một sự thay thế thanh lịch hơn.

CHỈNH SỬA:

một số giải pháp tốt được đăng tại đây - cảm ơn nhiều phản hồi!

Answer 1

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

đây là một fiddle: http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

$('#outer').on('click', function (e) { 
    if (e.target != this) return; 
    // run your code here... 
}); 

Đây là fiddle: http://jsfiddle.net/9sLCx/

Answer 3

Đối tượng sự kiện như hai thuộc tính đó sẽ giúp bạn đối với công việc này:

event.currentTarget xác định mục tiêu hiện tại cho sự kiện, khi sự kiện đi qua DOM. Nó luôn đề cập đến phần tử mà trình xử lý sự kiện đã được gắn vào trái ngược với event.target để xác định phần tử mà sự kiện xảy ra. Thông báo sự kiện sẽ chuyển cho div ngoài hai lần, trước tiên trong giai đoạn chụp và sau đó trong pha bubbling, ở giữa nếu bạn khởi tạo trình xử lý trong div bên trong, nó sẽ được thông báo. Bạn có thể dừng việc truyền bá khi bạn muốn.

http://fiddle.jshell.net/hmariod/dvV4E/

document.getElementById("outer").addEventListener('click',etvFn,true); 
document.getElementById("outer").addEventListener('click',etvFn,false); 
document.getElementById("inner").addEventListener('click',etvFn,true); 
document.getElementById("inner").addEventListener('click',etvFn,false); 
document.getElementById("innerP").addEventListener('click',etvFn); 

function etvFn(evt){ 
    var phase; 
    if(evt.eventPhase === 1){ 
     phase = "Capture"; 
    }else if(evt.eventPhase === 2){ 
     phase = "Target"; 
    }else{ 
     phase = "Bubbling"; 
    } 
    alert("Target:" + evt.target.id + "\nCurrent Target:" + evt.currentTarget.id + "\nPhase:" + phase); 
}​