javascript - 在外部单击时关闭弹出 div

Question

我有一个弹出 div，仅在单击特定按钮时才显示。单击同一个按钮时，它甚至会隐藏。我的问题是，我也想在点击外面的任何地方时隐藏 div。我无法这样做，因为弹出 div 位于主包装类内部，并且无法通过在包装类上使用 click 事件并将其隐藏来做到这一点。这是我的代码：

function showHide() {
    var ele = document.getElementById("div_fieldWorkers");

    if (ele.style.display == "block") {           
        ele.style.display = "none";
    } else {
        ele.style.display = "block";      
    }
}

<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="return showHide();" class="btn btn-primary" />

score 1 · Accepted Answer

这个问题的解决方案在这里：当用户点击 DIV 外部时，使用 jQuery 隐藏 DIV

此外，您标记了这个问题jquery，但您的代码是纯 javascript。使用jQuery时，只能写

$('#div_fieldWorkers').toggle();

在您的onclick中。

score 1 · Accepted Answer

看看这个：http: //jsfiddle.net/d4SsZ/1/

修订：http: //jsfiddle.net/d4SsZ/3/

只是一个片段：验证 null 和未定义的 js 错误（如果有）。

标记：

<div id="div_fieldWorkers" class="form_size" style='display:none;' class='noclick'><span class='noclick'>Hello How are you?</span></div>
<input
    type="button"
    value="Add Field Worker"
    id="btnFieldWorkers"
    class="btn btn-primary" />

Javascript：

 $('#btnFieldWorkers').bind("click", ToggleDisplay);

function ToggleDisplay() {
    if ($("#div_fieldWorkers").data('shown'))
        hide();
    else 
        display();
}

function display() {    
    if ($("#div_fieldWorkers").children().length > 0) {
        $("#div_fieldWorkers").fadeIn(500, function() {
            $(document).bind("click", function() {hide(); });            
            $("#div_fieldWorkers").data('shown', true)});         
    }  
}

function hide() {   
    if (window.event.toElement.className != 'noclick') {
        $("#div_fieldWorkers").fadeOut(500, function() {
            $(document).unbind("click");
            $("#div_fieldWorkers").data('shown', false);                
        });
    }
}

score 1 · Accepted Answer

有同样的问题，想出了这个简单的解决方案。它甚至可以递归工作：

$(document).mouseup(function (e)
{

var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    container.hide();
}
});

score 0 · Accepted Answer

在 body 元素和 stopPropagation 上创建点击事件。这使得事件仅在按钮上调用单击事件。然后检查点击目标元素不是弹出 div。例子：

$(function(){
   $("#btnFieldWorkers").click(function(e){       
       e.stopPropagation();
       $("#div_fieldWorkers").show();
       $("body").click(function(e){
           if(e.target.id != "div_fieldWorkers")
           {
               $("#div_fieldWorkers").hide();
               $("body").unbind("click");
           }
       });
   });

});

jsfiddle

score 0 · Accepted Answer

document.addEventListener('click', function () {
  document.querySelector('.menu').classList.remove('active');
});

document.querySelector('.toggle-menu-btn').addEventListener('click', function (event) {
  document.querySelector('.menu').classList.toggle('active');
  event.stopPropagation();
});

document.querySelector('.menu').addEventListener('click', function (event) {
  event.stopPropagation();
});

score -1 · Accepted Answer

您还可以通过单击弹出 div 来隐藏弹出窗口。为此，您必须在 div 标签中提供点击功能。在该点击功能中，您必须编写关闭弹出功能。

javascript - 在外部单击时关闭弹出 div

6 回答 6

Related

Reference