1. дома
  2. Вопрос и ответ
  3. Событие JQuery для того, когда пользователь щелкает за пределами div?

Событие JQuery для того, когда пользователь щелкает за пределами div?

2011-04-15 4 views
1

Есть ли событие, которое можно вызвать всякий раз, когда пользователь щелкает за пределами div, чтобы скрыть этот div?Событие JQuery для того, когда пользователь щелкает за пределами div?

Я пробовал использовать $(document).click(), однако это называется даже тогда, когда пользователь нажимает ссылку, которая должна показывать div. Следовательно, событие обработчика кликов показывает div, и сразу же скрывает его $(document).click(), что означает, что div никогда не отображается.

Идеи?

источник

2011-04-15 Click Upvote

ответ

6

Вы можете попробовать делегировании OnClick обработчик события для элемента тела (или другого подходящего родительского контейнера) и испытания, является ли target element является выявить ссылка:

$("body").click(function(e) { 
    if(e.target.id == "idOfLinkToShowDiv") { 
     $("#idOfTheDiv").show(); 
    } else { 
     $("#idOfTheDiv").hide(); 
    } 
});

выше, может быть сокращено с помощью .toggle:

$("body").click(function(e) { 
    $("#idOfTheDiv").toggle(e.target.id == "idOfLinkToShowDiv"); 
});

Другой способ:

$("body").click(function() { 
    $("#idOfTheDiv").hide(); 
}); 

$(".showLink").click(function(e) { 
    e.stopPropagation(); 
    $("#idOfTheDiv").show(); 
});

источник

2011-04-15 23:10:22 karim79

1

При нажатии любого элемента проверьте, соответствует ли идентификатор элемента тому, который вы хотите скрыть. Если это не так, скройте его.

$("*").click(function(){ 
    if(this.id === "hideMe"){ 
     return false; 
    } 
    else{ 
     $("#hideMe").hide(); 
    } 
});

Заканчивать демо на jsFiddle

источник

2011-04-15 23:11:45

+2

Это будет прикрепить обработчик щелчка к каждому отдельному элементу на странице. – karim79

+0

Это именно то, что я хотел, но имею 1 вопрос. Это работает отлично на скрипке, но когда я пытаюсь использовать его в моем коде 'this.id',' NULL' или 'empty' (проверяется с помощью предупреждения), поэтому он не работает. Я использую последний jQuery. Можете ли вы мне помочь? –

0

One soluation является проверка, который щелкнул элемент.

Другим решением может быть:

<body> 
    <div class="infopane"></div> 
    <div class="wrapper"> 
    content of page 
    </div> 
</body>

Так что я могу сделать:

$('.wrapper').click(function() { 
    $('.infopane').hide(); 
});

источник

2011-04-15 23:14:13 PeeHaa

1

Да. После отображения div, только затем привяжите событие click, чтобы скрыть div (к телу документа). Затем на отображаемом самом div, catch click() и предотвратите распространение на div click(). Любой щелчок за пределами div скроется, и любой щелчок внутри не будет пузыриться в документе.

function hideDiv(){ 
    $('#someDiv').hide(); 
    $(document.body).unbind('click',hideDiv); 
} 

$('#someLink').click(function(){ 
    $('#someDiv').show().click(function(e){ e.stopPropagation(); }); 
    $(document.body).bind('click',hideDiv); 
});

источник

2011-04-15 23:15:07 Jage

Смежные вопросы

 Смежные вопросы