Question

我所拥有的是通过使用jQuery .on（）函数附加点击处理程序的div网格。单击其中一个元素时，部分透明的DIV将作为覆盖在此网格上淡入，以防止在对话框打开时单击另一个元素。

问题在于，由于一些奇怪的原因。（＆＃39;点击＆＃39;）事件仍然通过覆盖层流失，好像它不在那里 - 我怀疑.on（）函数是责怪，因为当我只使用.click（）处理程序时，这个叠加层工作正常。

我已经尝试过在叠加div上使用event.stopPropagation的建议，以防止这种情况发生，但我到目前为止没有运气。

简化示例：

HTML：

<div class="grid-cointainer">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>
<div class="overlay"></div>

CSS：

.grid-container { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
   width: 400px; 
   height: 100px;
}
.grid-item { 
   float: left; 
   display: inline-block; 
   width: 100px; 
   height: 100px; 
   background-color: #666;
}
.overlay {  
   position: absolute; 
   top: 0px; 
   left: 0px; 
   width: 400px; 
   height: 100px; 
   background-color: #fff; 
   display: none; 
   opacity: 0.5; 
   z-index: 999 
}

JS：

 $('.grid-item').on( "click", function() { 
      showAwesomeDialog(this); 
      $('.overlay').css("display","block"); 
 });

jQuery：on（）附加的点击元素通过叠加层渗透

0 个答案: