僅將事件應用於尖銳的元素，但不是子元素

Question

我使用jquery創建了一個簡單的註釋特性。註釋功能正常工作，即當我單擊頁面時它會創建一個評論框。但它有一個缺點，即使點擊評論框，也會創建一個新的評論框。這不是我想要的。

我想創建一個新的評論框，當用戶點擊.body元素，但不是它的子元素，如評論框。

Fiddle

我試圖通過如圖中下面的代碼專門提及的子元素來解決這一點。但這甚至不會觸發.body元素上的事件。

$(document).on('mousedown', '.body', function (e) { 
     //code here 
}).on('mousedown', '.body *', function(e){ return false; }); 

Answer 1

什麼，你可以嘗試是檢查是否e.target是.body像

$(document).on('mousedown', '.body', function (e) { 
    if (!$(e.target).hasClass('body')) { 
     return; 
    } 

    //your code 
}); 

---

但在你的情況下，由於.pdfcontent是覆蓋整個.body可能要

$(document).on('mousedown', '.body .pdfcontent', function (e) { 
    var body = $('.body'); 
    var width = body.width(); 
    var height = body[0].scrollHeight; 

    var left = (e.pageX/width) * 100; 
    var top = (e.pageY/height) * 100; 
    setElement(left, top); 
}); 

演示：Fiddle

Answer 2

見http://jsfiddle.net/70b4Loh1/16/

我想你只需要綁定到.pdfcontent，而不是身體

$(document).on('mousedown', '.pdfcontent', function (e) {