jQuery隐藏，如果点击按钮外

问题描述：

我想通过点击按钮与jQuery显示一个段落。但是当它可见时，我想通过点击按钮以外的其他位置（即按钮外的任何地方）来隐藏它。例如，这里是我的代码：jQuery隐藏，如果点击按钮外

<p style="display: none">Hello world</p> 
<button>Say Hello</button>

的jQuery：

$("button").click(function() { 
    $("p").show(); 
});

这里的jsfiddle链接： http://jsfiddle.net/k9mUL/

我怎样才能通过点击该按钮外部隐藏呢？由于

答

您可以将click事件处理程序绑定到document以及按钮上的那个。在该事件处理程序，隐藏p元素：

$("button").click(function (e) { 
    $("p").show(); 
    e.stopPropagation(); 
}); 
$(document).click(function() { 
    $("p").hide(); 
});

您需要停止在button单击事件click事件的传播，否则会泡到document和p元素会被隐藏再次直远。

这是working example。

答

您可以在整个文档绑定的事件处理程序click事件，并检查是否有针对性的元素不是一个按钮：

$(document).click(function(e){ 
    if(e.target.nodeName.toLowerCase() != 'button') 
     $('p').hide(); 
});

或者这里有一个更“jQuery的”方式：

$(document).click(function(e){ 
    if(!$(e.target).is('button')) 
     $('p').hide(); 
});

活DEMO。

答

您可以利用事件的处理程序绑定到click事件的文件，并使用event.target，以确定如果用户点击该文件中的按钮或别的东西鼓泡：

$(document).click(function(event) { 
    if ($(event.target).is("button")) { 
     $("p").show(); 
    } else { 
     $("p").hide(); 
    } 
});

这个'if（$（event.target）.is（“button”））'现在帮了我。太棒了。 jQuery总体来说真的很珍贵！一个人如何没有它...：D –

答

<p style="display: none">Hello world</p> 
<button onclick='show(event);'>Say Hello</button> 

function show(e){ 
    $("p").show(); 
    e.cancelBubble = true; 
    document.addEventListener('click',hide,false); 
} 

function hide(){ 
    $("p").hide(); 
    document.removeEventListener('click',hide,false); 
}

请不要使用内联js :(。这是坏的和丑陋的 –

答

虽然这样做手工是伟大的，有一个插件，它允许您添加此功能的它可以帮助你：

http://benalman.com/projects/jquery-outside-events-plugin/

jQuery隐藏，如果点击按钮外

相关推荐