z-index и onclick в HTML

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 не вызовет его щелчок, а только A, так как A имеет более высокий z-индекс.

Если не с z-index, как мне этого добиться?

Answer 1

Для этого можно использовать делегирование события - нет необходимости в z-index и т. П.Присвоение одного (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-индекс не будет работать, так как вам нужно изменить положение 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/

Answer 3

Я думаю, что использование position: absolute в ваших стилях и позиционирование одного над другим сделают это В настоящее время div A и div B располагаются рядом.

Answer 4

Вот один из способов обработки события onclick B

пример: 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.

Answer 5

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

Сделайте «protectDefault», если вы не хотите, чтобы B стрелял.