2012-02-06 3 views
1

Прикрепленный заголовок с кнопкой (kinda) close (в красном) moc-up. Когда я нажимаю кнопку закрытия (область, которая перекрывается с заголовком) - ничего не происходит. Можете ли вы посоветовать правильное решение по этому вопросу?Почему событие click не распространяется?

HTML:

<div id="my_body" style="background:rgba(0, 0, 0, 0.6);padding:10px;"> 
    <div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div> 
    <div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> 
    <div id="pic_area" style="border:2px solid #b3b3b3;margin-top:10px"> 
     <img id="pic" src="http://never.mind.which.pic.com" > 
    </div> 
</div> 

JS:

$("#cls_btn").bind("click", function() { 
    alert("clicked!"); 

    return true; 
}); 

JSFiddle: http://jsfiddle.net/JuGx9/

Спасибо!

ответ

1

Ваш 'my_header' покрыть ее. изменения строк:

<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div> 
<div id="cls_btn" style="position:absolute;left:0px;top:0px;height:50px;width:50px;background-color:red;"> </div> 
+0

Почему заказ строки имеет значение? – BreakPhreak

+0

Я имею в виду, что * правильный * порядок элементов - будет ли он на 100% переносимым через браузеры? – BreakPhreak

+1

Если вы нажмете в верхней части окна огонь события. Когда другой div закрывает кнопку, вы не нажимаете кнопку, а на втором div. поэтому, когда я меняю строки, кнопка находится над вторым div, и он может получить ваш клик. Вы также можете переместить «my_header» вправо, чтобы он не закрывал кнопку, и она будет работать. – Hadas

3

Этот элемент (<div id="my_header" style="position:relative;padding:14px 26px 26px"> </div>), кажется, занимает одно и то же пространство и принимает событие щелчка, а не #cls_btn div. Применение свойства CSS z-index со значением 999 устраняет проблему.

Working DEMO

+0

Спасибо! Есть ли способ решить это, не помогая «z-index». *Просто любопытно*. – BreakPhreak

Смежные вопросы