z-index and onclick in HTML

z-index and onclick in HTML

本文关键字：HTML in onclick and z-index      更新时间：2023-09-26

我有以下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，因为A有更高的z索引。

如果没有z索引，我该如何实现？

您可以使用事件委派来实现这一点，而不需要z索引等。将一(1(个点击处理程序分配到最顶层的div，并在处理程序中使用事件目标/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;

在操作中查看

您的z索引无法工作，因为您需要将css位置更改为相对、固定或绝对。reference.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/

我认为在你的风格中使用position:absolute并将一个放在另一个之上可以做到这一点。目前，分区A和分区B并排放置。

<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"。

这里有一种处理切换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解决方案。

相关文章：