HTML 中的 z-index 和 onclick

Question

我有以下 HTML 代码：

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="A" style="width:100px; height: 100px; background: #00FF00; padding: 15px; 
     z-index: 50; opacity: .5" onclick="javascript:alert('A')">
    <div id="B" style="width:50px; height: 50px; background: #FF0000; z-index:10;"  
      onclick="javascript:alert('B')" >
    </div>
</div>

我希望这样可以使单击 div B 的位置不会调用它的 onclick，而只会调用 A 的 onclick，因为 A 具有更高的 z-index。

如果不使用 z-index，我怎样才能实现这一目标？

Answer 1

您可以使用事件委托来实现 -不需要 z 索引等。将一 (1) 个单击处理程序分配给最上面的 div，并在处理程序内使用事件 target/srcElement 来决定对原始元素执行（不执行）操作。类似于：

<div id="A" style="width:100px; height: 100px; 
                   background: #00FF00; padding: 15px; 
                   z-index: 50; opacity: .5"">
  <div id="B" style="width:50px; height: 50px; 
                   background: #FF0000; z-index:10;" ></div>
</div>

处理函数：

function myHandler(e){
  e = e || event;
  var el = e.srcElement || e.target;
  // no action for #B
  if (el.id && /b/i.test(el.id)){ return true; }
  alert(el.id || 'no id found');
}
// handler assignment (note: inline handler removed from html)
document.querySelector('#A').onclick = myHandler;

查看实际操作

Answer 2

你的 z-index 将不起作用，因为你需要将 css 位置更改为相对、固定或绝对。参考.sitepoint.com/css/z-index。

 <div id="A" style="width:100px; height: 100px; background: green; padding: 15px; 
         z-index: 50; opacity: .5; position:relative;" onclick="alert('A'); return false;">
        <div id="B" style="width:100%; height:100%; background: red; z-index:100;position:relative;"  
          onclick="window.event.stopPropogation();alert('B'); return false;" >
        </div>
    </div>

http://jsfiddle.net/SmdK8/

Answer 3

我认为在你的样式中使用position:absolute并将一个放在另一个之上就可以做到这一点。当前 div A 和 div B 并排放置。

Answer 4

<div id="A" style="width:100px; height: 100px; background: #00FF00; padding: 15px; 
     z-index: 50; opacity: .5" onclick="javascript:alert('A')">
    <div id="B" style="width:50px; height: 50px; background: #FF0000; z-index:10;"  
      onclick="javascript:event.preventDeafult();" >
    </div>
</div>

根据您不希望 B 触发的时间执行“preventDefault”。

Answer 5

以下是处理切换 B 的 onclick 事件

示例的一种方法： http://jsfiddle.net/pxfunc/cZtgV/

HTML：

<div id="A">A
    <div id="B">B
    </div>
</div>
<button id="toggle">Toggle B onclick</button>

JavaScript：

var a = document.getElementById('A'),
    b = document.getElementById('B'),
    toggleButton = document.getElementById('toggle'),
    hasOnClick = true;

a.onclick = function() { alert('hi from A') };
b.onclick = function() { alert('hi from B') };

toggleButton.onclick = function() {
    if (hasOnClick) {
        b.onclick = "";
    } else {
        b.onclick = function() { alert('hi from B') };
    }
    hasOnClick = !hasOnClick;
};

为了奖励积分，示例中有一个 jQuery 解决方案。