Блог

Весь поиск, который я выполнил, приводит к вопросам, направленным на достижение обратного. В Firefox появляется мой слой div, содержащий меню, плавающий над другим содержимым при нажатии на другой элемент на странице. Содержимое под ним, такое как ссылки, недоступно для просмотра. Это поведение, которое я хочу, но оно не работает таким образом в Internet Explorer. В IE промежутки между ссылками в меню позволяют нажимать ссылки на содержимое под этим разделом. Также реклама Google, которая появляется под плавающим div, доступна для просмотра через div. Я хочу, чтобы div был сплошным и не допускал нажатия на любой контент под ним в IE, кто-нибудь может помочь с этим, пожалуйста?

распространение событий

например, это означает, что щелчок перемещает все элементы под курсором вглубь (захват) и обратно (пузырькование), вызывая реакции от многих элементов… распространенной ошибкой является думать о графическом отношении вместо отношения DOM parent-child (между элементами)

давайте поэкспериментируем:

 <div id="bottomDIV" 
onclick="rBot(event)" onMouseOver="this.style.background='olive'"
onMouseOut="this.style.background='#FF6'">bottomDIV
<div id="topDIV">topDIV</div></div>
</div>
  

итак, topDIV является первым дочерним элементом BottomDIV

добавьте некоторый стиль:

 <style>
#bottomDIV{ width:200px;height:200px; background:#FF6;}
#topDIV{
width:200px;height:200px;
position:relative;
background:rgba(0,255,255,.5);
top:80px;left:100px;}
</style>
  

добавить реакции на события:

   <script>
//add reaction for bottomDIV
bottomDIV=document.getElementById('bottomDIV')
rBot=function(e){evt=e||event;alert(evt.type   
            "n" ( evt.srcElement||evt.target).id  "n") ;//FF/IE
}


// add reactions on same event type for topDIV 
topDIV=document.getElementById('topDIV');
rTop=function(e){
        evt=e||event;
        if(evt.target)alert(evt.target.id); else alert(evt.srcElement.id)
        }

topDIV.addEventListener('click',rTop,false);
topDIV.addEventListener('mouseover',function(){this.style.background=
                                            'rgba(200,200,100,.7)'},false)
topDIV.addEventListener('mouseout',function(){this.style.background=
                                            'rgba(0,255,255,.5)'},false)
</script>
  

теперь обратите внимание на поведение в booth IE / FF для щелчка и наведения;

Даже под курсором нет графического перекрытия 2-х разделов — для выполнения реакций topDIV объекты событий следуют за отношением parentchild и при возврате запускают также нежелательные родительские реакции; Так что проблема в дочернем элементе 🙂

Решения:

1 остановите пузырящийся (обратный поток)

создайте функцию кроссбраузерной обработки, которая остановит распространение событий

 function SEP(evt){
                 try{evt.stopPropagation()}
                 catch(err){;evt.cancelBubble=true;}
      } //(IE/FF)
  

и перепишите все реакции topDIV, например:

 rTop=function(e){evt=e||event;SEP(evt);var elm=this;alert(elm.id);} 
  

2 — прервать связь родитель-потомок между 2 разделами
добавьте topDIV непосредственно в тело

 document.body.appendChild(topDIV);
  

и убедитесь, что вы сохраняете верхнюю

 topDIV.style.zIndex=1000; 
  

RU:) но не

Я думаю, что это хороший момент для уточнения .addEventListener(‘событие’, реакция, истина ), что означает, что событие срабатывает на этапе захвата

мы вернулись к решениям 1,2, поэтому у нас есть свободный поток событий parent-> child-> parent

как насчет нажатия topDIV (в любом месте), мы запускаем только реакцию bottomDIV?

 justBottomReation=function(e){evt=e||event;SEP(evt);elm=this;alert(elm.id)}
bottomDIV.addEventListener('click',justBottomReation, true)
  

таким образом, щелчок фиксируется родительским элементом, который отреагирует, и SEP() заблокирует распространение на дочерний элемент.

Если вы используете jQuery, вы могли бы использовать blockUI .

Я, наконец, случайно обнаружил обходной путь, чтобы остановить IE, ведущий себя таким образом. Когда я добавил фиксированную ширину к div, содержащему меню, проблема с возможностью щелкнуть conent под div исчезла.