2

珍しいことに気づきました。これは私が達成したいことです:

  • リンクをクリックしたときに div を表示したい

  • ドキュメント内の別の場所をクリックしたときに div を非表示にしたい

  • 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 を右クリックすると消えてしまいました。これは私が探している動作ではありません。Firefox では、stopPropagation() はクリックでは機能しますが、右クリックでは機能しないようです。Chrome は、右クリックがドキュメントに伝播しないようにします。

どうすれば修正できますか？

ありがとう

4

2 に答える 2

5

どのボタンがクリックされたかを検出するには、event.which メソッドを使用します。jsfiddleの例を次に示します。

$(document).on('click', function(event) {
    if (event.which == 1 && box.css('display') == 'block') {
        box.css('display', 'none');
    }
});
于 2012-09-14T19:26:07.800 に答える
0

実際に動作するように編集...

申し訳ありませんが、イベントは予想どおりに機能しませんでした。マウスオーバーで操作できます。

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

})();
于 2012-09-14T19:21:53.933 に答える