Question

我有一个由按钮控制（显示/隐藏）的div（目标）。当按钮被触发时，div将显示..那一刻，当我在按钮或div（target）以外的任何地方单击时。 div（目标）应该隐藏起来。

我尝试了event.stopPropagation();，但未找到结果

按钮

<div class="applicationTrigger appbtn">
  <i class="so-icon"></i>
</div>

目标div

<div class="app-drop"></div>

当我使用event.stopPropagation();方法时，完整的按钮操作不起作用。

Answer 1

我已附上该演示，该演示将根据您的要求运行。单击按钮将显示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>

Answer 2

您需要注册一个用于单击的全局侦听器。然后获得按钮和目标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
   }
});

see this example

Answer 3

您要在用户单击按钮外部时禁用div。好的，首先我想说的是，您指出您已经尝试event.stopPropagation()并没有得到预期的结果... 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>

在div及其按钮之外单击时关闭div

3 个答案: