CODEWITHSUNDEEP
javascripthtmlz-index
Matt
Matt

Reputation: 26981

z-index and onclick in HTML

I have the following HTML code:

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

I was hoping this would make it so that clicking on div B's position would not invoke it's onclick, but only A's since A ha a higher z-index.

If not with z-index, how can I achieve this ?

Upvotes: 2

Views: 19961

Answers (5)

KooiInc
KooiInc

Reputation: 122936

You can use event delegation for that - no need for z-indexes and the like. Assing one (1) click handler to the topmost div and, within the handler, use the event target/srcElement to decide what (not) to do with the originating element. Something like:

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

The handler function:

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;

See it in action

Upvotes: 5

MikeM
MikeM

Reputation: 27405

Here's one way to handle toggling B's onclick event

example: 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;
};

for bonus points there's a jQuery solution in the example.

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

Your z-index's won't work as you need to change the css position to relative, fixed, or absolute. 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/

Upvotes: 4

Simon
Simon

Reputation: 2830

I think using position: absolute in your styles and positioning one over the other would do this. Currently div A and div B sit side by side.

Upvotes: 1

Satyajit
Satyajit

Reputation: 3859

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

Do a "preventDefault" based on when you don't want B to fire.

Upvotes: 0

Related Questions