javascript - z-index javascript css 问题

Question

我在页面上动态创建了可通过 jquery 拖动的 div。

我在每个 div 上添加了一个小按钮，允许用户通过单击删除 div。

我遇到的问题是，我将突出显示的 div 设置为页面上的最前面的元素，但是如果该 div 与另一个 div 重叠并且用户单击删除按钮，下面的 div 将突出显示并置于最前面而不是按钮被点击。

我已将按钮定位在 div 中，但位置似乎没有任何效果。按钮附加到 div。

我假设它与按钮的 z-index 有关，但我可能完全走错了路

如有任何帮助，我们将不胜感激。

这是我用来将按钮附加到 div 的代码。在创建 div 函数循环中创建 div 之后立即调用此代码。

  var but=document.createElement('input');
  but.setAttribute('type','button');
  but.setAttribute('class','removebutton');
  but.style.position = "absolute";
  but.style.top = "15px";
  but.style.left = +width+"px";
  but.style.float="right";
  but.style.visibility="hidden";

  but.onclick=function(){
    if(confirm('Really delete?'))
      {                   
       $.post("delete_box.php",{i:i, page_ref:'<? echo $page_ref; ?>', template_ref:'<? echo $template_ref; ?>'}, function(data,status){ });    
    document.getElementById("frmMain").removeChild(newdiv);
    document.getElementById(id).removeChild(but);
    document.getElementById(id).removeChild(newbr);

      }             
   }

这是我用来将点击的 div 置于最前面并将其他任何东西推回的代码(每个 div 的类名都是 dragbox)

   $('.dragbox').click(function() 
      { 
         $(".removebutton").css('visibility', 'hidden');
         $(this).css({  
        'background-image':'url(img/move.png)',
        'background-repeat':'no-repeat',
        'width':'15px',
        'height':'15px',
        'zIndex':'1000'
        })
        $(this).find(".removebutton").css('visibility', 'visible');

  });   



$('.dragbox').focusout(function() {   
    $(this).css({
                   'border', '0px',
           'background-color', 'transparent',
           'width', '0px',
           'z-index', '0'
        })      
      });   

Answer 1

我认为您需要停止按钮上单击事件的传播。

当用户点击按钮时，点击事件将被传递(又名冒泡)到点击位置的所有底层元素。

but.onclick = function(e){
    e.stopPropagation(); // stop the propagation of the click event to other elements

    // ... your code             
}