Question

我刚注意到一些异常。这就是我想要实现的目标：

我想在点击链接
当我点击文档中的其他位置时，我希望div消失
单击div本身

这样的事情：

JS：

(function() {
    var box = $('#box');
    $(document).on('click', function() {
        if (box.css('display') == 'block') {
            box.css('display', 'none');
        }
    });
    $('#start').on('click', function(e) {
        box.css({
            'text': 'Box',
            'position': 'absolute',
            'top': '50px',
            'left': '0',
            'background': '#EEE',
            'border': '1px solid #555',
            'width': '200px',
            'height': '50px',
            'display': 'block'
        });
        e.stopPropagation();
    });

    box.on('click', function(e) {
        e.stopPropagation();
    });
})();

这个小提琴工作得很好但是当我在Firefox（15.0.1）中测试时，如果你右键点击div，它会消失，这不是我正在寻找的行为。似乎stopPropagation（）适用于点击，但不适用于Firefox中的右键单击。 Chrome会使右键单击无法传播到文档。

我该如何解决？

由于

Answer 1

使用event.which方法检测单击了哪个按钮。以下是jsfiddle中的示例。

$(document).on('click', function(event) {
    if (event.which == 1 && box.css('display') == 'block') {
        box.css('display', 'none');
    }
});

Answer 2

编辑实际工作......

很抱歉，事件没有按预期进行。你可以用鼠标悬停来处理它。

(function() {
var box = $('#box');
var clicky = true;
$(document).on('click', function() {
    if (box.css('display') == 'block' && clicky) {
        box.css('display', 'none');
    }
});
$('#start').on('click', function(e) {
    box.css({
        'text': 'Box',
        'position': 'absolute',
        'top': '50px',
        'left': '0',
        'background': '#EEE',
        'border': '1px solid #555',
        'width': '200px',
        'height': '50px',
        'display': 'block'
    });
    e.stopPropagation();
});
box.mouseenter(function(e) {
    clicky = false;
});    
box.mouseout(function(e) {
    clicky = true;
});

})();

右键单击继续在Firefox中传播

2 个答案: