$(event.target).closest().隐藏div的长度并不总是有效.任何替代品？

Question

$(event.target).closest().隐藏div的长度并不总是有效.任何替代品？

我$(event.target).closest("#divID").length用来隐藏div用户在其外部点击的时间,但是在div可见的情况下我单击日期(datepicker)它将不会隐藏div.

此外,如果我点击<select>有时它隐藏它有时它不会.

有什么更好的解决方案可以在点击其他内容时隐藏div吗？

我的实施错了吗？

ps:#log_in是登录按钮,#log_in_form是form我想在外部点击时隐藏的按钮,是#log_in_container包含#log_inand和的div#log_in_form

更新:我刚注意到在Windows 10和Linux ubuntu 16.04上的消失是不一样的.在使用谷歌浏览器使用谷歌浏览器的PC上,表格在第一次点击时消失了(这是理想的功能),但如果我选择日期,它仍然不会消失.虽然在谷歌Chrome上的Linux ubuntu 16.04上,它就像我上面描述的那样(在选择日期时不会消失,并且在你选择的第一次点击时也不会消失)

示例基于Andrei对代码段的回答

$(document).on('click', function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
    {
      $('#log_in_form').fadeOut();
    }
})

Run Code Online (Sandbox Code Playgroud)

#log_in_container{
  display:inline-block;
  width:122px;
  height:58px;
  margin-left:60px;
  background-color:gray;
}

#log_in{
  display:block;
  width:120px;
  height:28px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
  background-color:yellow;
  vertical-align: top;
}

#log_in_form{
  display:none;
  position:absolute;
  width:120px;
  height:28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type{
  display:inline-block;
  width:120px;
  height:30px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
  	  $( function()
	  {
    	  $( "#datepicker" ).datepicker();
  	  });
  	</script>
    <title></title>
  </head>
  <body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
      <div  id="log_in">Log_In_button</div>
      <div id ="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在上面的代码片段中,如果单击Log_in_button,则会显示Log_in_form.如果然后你单击它不会消失的日期,然后单击一个选择Log_in_form仍然不会消失,之后单击下一步选择Log_in_form仍然可见.我想这样做,以便它在这些场合消失(如选择弹出窗口).这可能吗？

Answer 1

Rhu*_*orl 4

jQuery 仅适用于事件冒泡（事件从目标元素开始并沿 DOM 树向上运行，引发单击事件直至到达顶层document）。正如您在中看到的那样，潜在的问题ui-datepicker是元素可以通过使用来取消冒泡event.stopPropagation()，而document永远不会得到它。

相反，您需要使用原始 Javascript 事件捕获，其中顶级元素捕获发生的事件并将其传递到DOM 树。

W3C 网站上的图表很好地解释了捕获和气泡流，请参阅此问题以了解更多详细信息和跨浏览器实现。

您的代码所需的更改很小，您只需使用而document.addEventListener不是$(document).on：

document.addEventListener("click", function(e){
    if($(e.target).closest('#log_in').is('#log_in'))
    {
      $('#log_in_form').fadeIn();
    }
    else if(!$(e.target).closest('#log_in_container').is('#log_in_container'))
    {
      $('#log_in_form').fadeOut();
    }
}, true);

Run Code Online (Sandbox Code Playgroud)

#log_in_container{
  display:inline-block;
  width:122px;
  height:58px;
  margin-left:60px;
  background-color:gray;
}

#log_in{
  display:block;
  width:120px;
  height:28px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
  background-color:yellow;
  vertical-align: top;
}

#log_in_form{
  display:none;
  position:absolute;
  width:120px;
  height:28px;
  text-align: center;
  background-color: green;
  border: 1px solid blue;
}

.type{
  display:inline-block;
  width:120px;
  height:30px;
  text-align: center;
  border: 1px solid red;
  font-size:16px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- ~~~~~~~~~~~~~~~Date picker ~~~~~~~~~~~~~~~ -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
  	  $( function()
	  {
    	  $( "#datepicker" ).datepicker();
  	  });
  	</script>
    <title></title>
  </head>
  <body>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select hero</p></option>
      <option value="0">Spiderman</option>
      <option value="1">Iron man</option>
      <option value="2">Deadpool</option>
  </select>
  <select class="type">
      <option value="null" disabled="disabled" selected="selected"><p style="color:gray;">Select food</p></option>
      <option value="0">Kebab</option>
      <option value="1">Mousaka</option>
      <option value="2">Noodles</option>
  </select>
  <div id="log_in_container">
      <div  id="log_in">Log_In_button</div>
      <div id ="log_in_form">login_form</div>
  </div>
  <div id="datepicker"></div>


  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

正如您之前提到的，初始版本<select>可以在 Windows 上的 Chrome 中运行，但不能在 Linux 上的 Chrome 中运行。浏览器通常将表单控件的渲染交给操作系统以实现视觉一致性，但这可能会导致行为不一致。<select>s 可能是基本表单控件中最不一致的，因为它们增加了复杂性。这个问题说明了这个问题，特别是：

Linux 上的 Chrome 19：第一次鼠标单击会展开选项 [单击事件未触发]，随后单击仍然存在的选择或选项，会触发单击事件。

由于这是您无法控制的浏览器行为，因此我认为没有任何方法可以解决它 - 您只能处理它触发的事件。如果该事件不是由浏览器触发的，您将无法对其做出反应。

归档时间：	8 年，3 月前
查看次数：	1918 次
最近记录：	7 年，5 月前