Щелчок в jQuery

Question

Какой самый простой способ сделать щелчок в jQuery, где ящик для Div скрывается, если нажимает в любом месте за его пределами.

Answer 1

Мне не нравятся решения, которые используют stopPropagation Потому что часто я использую пузырьки событий для управления различными ссылками. Я не хочу беспокоиться о том, что они могут перестать работать, если ящик существует. Мой выбор выглядел бы примерно так:

var $box = $('#box');
$(document.body).click(function(){
    if (!$box.has(this).length) { // if the click was not within $box
        $box.hide();
    }
});

А has Функция фильтрует выбор и возвращает элементы только в том случае, если они содержат элемент, переданный как параметр (вы также можете использовать строку селектора, но это не имеет значения здесь). Если щелчок был вне поля, length будет 0 Таким образом, условное пройдет, и коробка будет скрыта.

Это должно быть оптимизировано путем установки логического значения для того, виден ли в данный момент ящик, и только выполняет has Позвоните, если это в настоящее время видно.

Answer 2

как это:

$("#thediv").show(0, function() {
   var that = $(this);
   $(document).bind("click", function(e) {
       if($(e.target).attr("id") != that.attr("id")) {
          that.hide();
          $(this).unbind("click");
       }
    });
});

скрипка здесь: http://jsfiddle.net/xybme/3/

Answer 3

$('body').click(function() {
    $('#box').fadeOut();
});

$('#box').click(function(e) {
    e.stopPropagation();
});

Это работает, потому что #box сначала получит событие Click, если вы нажмете внутрь. Поскольку распространение остановлено, обработчик, прикрепленный к телу, не получит его, поэтому поле не будет закрыто, если вы не нажмете за пределами коробки.

Если вы хотите, чтобы он сразу же спрятался, используйте .hide()

У меня есть трюк Stoppropagation () от Как обнаружить щелчок вне элемента?

Answer 4

Я знаю, что у jQuery есть "Focusout" событие для элементов формы, не уверен, можно ли его использовать для

Answer 5

Я рекомендую использовать эту либера https://github.com/gsantiago/jquery-clickout. Анкет Это круто!

$('button').on('clickout', function (e) {
  console.log('click outside button')
})

Answer 6

Свяжите функцию щелчка с самого документа:

$(document).click(function(){
    alert('doc');
});

Затем свяжите функцию с тем же событием на самом DIV и верните FALSE, чтобы событие не смотрелось на документ.

$('#mydiv').click(function(e){
    alert('mydiv click');
    return false;
}

Answer 7

Вот мое решение

    var ClickOut = {};

    ClickOut.list = [];

    ClickOut.Add = function(jqel, callback) {
        var i = ClickOut.list.push({jqel:jqel, callback:callback});
        return (i-1);
    }

    ClickOut.Remove = function(i) {
        ClickOut.list.splice(i, 1);
    }

    ClickOut.Init = function() {
        $('body').click(function(e) {
            for(var x = 0; x < ClickOut.list.length; x++) {
                if (!ClickOut.list[x].jqel.has(e.target).length) {
                    ClickOut.list[x].callback();
                }
            }
        });
    }