仅将事件应用于尖锐的元素，但不是子元素

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) {