Как предотвратить переход по плавающему меню по ссылкам ниже в IE

Question

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

Answer 1

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

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

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

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

теперь наблюдайте поведение в кабине IE / FF для клика и перемещения мышью;

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

РЕШЕНИЯ:

1 остановить барботирование (обратный поток)

создать кросс-браузерную функцию Stop Event Propagation

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; 

EN :), но не

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

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

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

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

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

Answer 2

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

Answer 3

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