Правый клик продолжает распространяться в Firefox

Question

Я только что заметил что-то необычное. Это то, что я хочу сделать:

• Я хочу ДИВ быть показано, когда я нажимаю ссылку

• Я хочу ДИВ исчезнуть, когда я нажимаю где-то в документе

• Я не хочу, чтобы исчезнуть, когда я нажимаю DIV сам

что-то вроде этого:

http://jsfiddle.net/XPmyF/

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; 
}); 

})();