Прослушивание событий на сложенных элементах

Если у меня есть три divs, уложенных друг на друга, и я хочу прослушать нижнюю часть div на mousemove, тогда я получу только это событие, когда я на самом деле поверх только низ самый элемент. Если другой элемент лежит частично поверх элемента, который я слушаю, это событие не будет выбрано для этого элемента после того, как я переместите указатель мыши над другим элементом (который охватывает только мой элемент, я все еще над исходным элементом, но теперь также над новым).Прослушивание событий на сложенных элементах

Я создал jsfiddle, чтобы отобразить мою дилемму: https://jsfiddle.net/maffelu/o5pmxrgz/2/

HTML:

<div id="one"> 
</div> 
<div id="two"> 
</div> 
<div id="three"> 
</div>

CSS (штабелирования дивы немного друг на друга):

div { 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    border: 1px #000 solid; 
} 

#one { 
    top: 20px; 
    left: 20px; 
    background: red; 
} 

#two { 
    top: 50px; 
    left: 50px; 
    background: green; 
} 

#three { 
    top: 80px; 
    left: 80px; 
    background: blue; 
}

Javascript :

document.getElementById('one').addEventListener('mouseover', function(e) { 
    console.log('one'); 
}); 

document.getElementById('two').addEventListener('mouseover', function(e){ 
console.log('two'); 
}); 

document.getElementById('three').addEventListener('mouseover', function(e){ 
console.log('three'); 
});

Я хочу прослушивать mousemove для всех трех разделов отдельно, есть ли способ продолжать слушать, даже если вы технически наводите мышь на свой элемент, который только что накрыт?

источник

2016-05-23 Maffelu

, если я понимаю, правильно, это может помочь https://jsfiddle.net/o5pmxrgz/3/ я создал его из этого ответа http://stackoverflow.com/a/23384751/2227526 –

@FastSnail: Это один из способов, но это не жизнеспособное решение для как я не смогу сделать семью событий. Мое реальное приложение имеет отдельные svg-элементы, которые работают отдельно друг от друга. – Maffelu

Я нашел решение моей проблемы. Я слушаю, содержащий элемент для всех моих элементов и вычислить, когда я над DIV, как это (скрипка https://jsfiddle.net/maffelu/o5pmxrgz/4/):

HTML:

<div id="container"> 
    <div id="one"> 
    </div> 
    <div id="two"> 
    </div> 
    <div id="three"> 
    </div> 
</div>

Javascript:

var oneBoundaries = document.getElementById('one').getBoundingClientRect(); 
document.getElementById('container').addEventListener('mousemove', function(e) { 
    var x = e.clientX; 
    var y = e.clientY; 
    var insideX = x >= oneBoundaries.left && x <= oneBoundaries.right; 
    var insideY = y >= oneBoundaries.top && y <= oneBoundaries.bottom; 

    if(insideX && insideY){ 
    console.log('On top of "one"!'); 
    } 
});

источник

2016-05-23 08:43:09 Maffelu

Прослушивание событий на сложенных элементах

ответ

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