javascript - 单击事件和 css 属性未附加到 div，可能是因为 div 是 "moSTLy padding"

Question

我正在尝试将点击事件附加到几个 div。其中一个没有高度或宽度，只有边框。也许它只是浏览器，但点击被触发非常不可靠。甚至 css 参数 .class:hover{} 也没有真正起作用。

$("body").on("click", "._tlh_dropdown, ._tlh_dropdown *", function (event) {

在单击 ._tlh_dropdown 包含的 div 时不起作用。 div ._tlh_dropdown_close_button 在单击时不会删除它的父 div，在悬停时也不会变成更深的灰色阴影。我在这里做错了什么？我认为这与未应用于“只是填充”的 div 区域的单击事件有关。是这样吗？我该如何克服这个问题？

http://jsfiddle.net/UrNUM/7/

Answer 1

发生这种情况是因为作为 div 元素的下划线元素与相关元素重叠。如您所知，div 是 block 级元素。

一种解决方法是将 2 个 div 设置为 inline-block

._tlh_dropdown_input_container, ._tlh_dropdown{
    display: inline-block;
}

Check Fiddle for hover

如果你希望 div 是 block 级的，那么你也可以使用 z-index

._tlh_dropdown_close_button{
     z-index: 1;   
}

这将确保关闭的 div 始终位于底层容器的顶部

更新

页面上的每个点击事件都会触发 2 个事件。

所以当你点击图片时，由于这种情况，内容不会显示

if ($targ.hasClass('_tlh_dropdown') 
      || $targ.closest('._tlh_dropdown_content').length)

return; 

发生这种情况是因为当您单击箭头图像时 e.target 将是箭头而不是 tlh_dropdown ..所以它在这种情况下失败并移动到删除内容的下一条语句。

改变它

if ($targ.hasClass('_tlh_dropdown') 
       || $targ.closest('._tlh_dropdown').length  
       || $targ.closest('._tlh_dropdown_content').length) 
 return; 

它应该工作..

Check Fiddle

我还觉得可以用更少的代码来完成同样的事情。您始终可以构建已构建的 HTML，然后根据条件隐藏或显示。