Question

我使用jquery创建了一个简单的注释功能。注释功能工作正常，但是当我点击页面时它会创建一个注释框。但它有一个缺点，即当我点击评论框时，会创建一个新的评论框。这不是我想要的。

我想在用户点击.body元素而不是其子元素，即评论框时创建一个新的评论框。

我试图通过特别提到子元素来解决这个问题，如下面的代码所示。但这甚至不会触发.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) {

仅将事件应用于指向的元素，但不应用于其子元素

2 个答案: