在div及其按钮之外单击时关闭div
在div及其按钮之外单击时关闭div
提问于 2019-07-16 17:25:42
我有一个由按钮控制(显示/隐藏)的div(目标)。当按钮被触发时，div将显示出来。当我在除按钮或div(目标)之外的任何地方单击时。div(目标)应该被隐藏起来。
我用event.stopPropagation();试过了，但没有找到结果
按钮
<div class="applicationTrigger appbtn">
<i class="so-icon"></i>
</div>目标分区
<div class="app-drop"></div>当我使用event.stopPropagation();方法时，完整的按钮动作不起作用。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-07-16 17:34:51
我已附上演示，这将按照您的要求工作。单击该按钮将显示div内容。如果您在div外部单击，它将隐藏div的内容。
$(document).mouseup(function (e){
var container = $(".wrapper");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
$(document).on('click','#show_btn',function (e){
$(".wrapper").toggle();
}); .wrapper{
display:none;
height:200px;
width:100px;
border:1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gall
</div>
<button id="show_btn" type="button">Show</button>
Stack Overflow用户
发布于 2019-07-16 17:45:01
您需要为click注册一个全局监听器。然后获取按钮和目标div的两个实例。当调度全局单击事件时，将该事件上的目标与之前获得的两个实例进行比较。如果它们不相同，则运行隐藏代码。
const button = document.getElementsByClassName('applicationTrigger')[0];
const target = document.getElementsByClassName('app-drop')[0];
document.addEventListener('click', (e) => {
const clickedTarget = e.target;
if (clickedTarget !== button && clickedTarget !== target) {
// hide code
}
});Stack Overflow用户
发布于 2019-07-16 19:16:15
当用户在按钮外部单击时，您希望禁用div。好的，首先我想说的是，你指出你已经尝试过event.stopPropagation()，没有得到预期的result...The stopPropagation()方法只会阻止当前事件在捕获和冒泡阶段的进一步传播，这种情况与你的问题无关。
下面的代码将按照您的预期运行。
<div class="your-upper-most-div" onclick="hideAppDrop(event)">
</div>
------------------------------------
<script>
function hideAppDrop(event) {
let element = document.getElementById("app-drop-id");
if(event.target.className !== "applicationTrigger appbtn"){
element.style.display = "none";
}
else{
element.style.display = "block";
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57054083
复制相关文章
相似问题
腾讯云开发者
