Слушатель событий на холсте за другим элементом

Question

У меня есть прослушиватель событий перемещения мыши, прикрепленный к моему холсту. Но поверх моего холста есть div с более высоким z-индексом, в нем есть некоторые кнопки меню.

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

В настоящее время он действует так, как будто мышь больше не находится поверх холста, потому что элемент меню имеет приоритет из-за порядка z-индекса.

Есть ли способ заставить слушателя этого события игнорировать любые элементы, которые мешают?

Мой код:

var canvas = new function(){ 
     var self = this 

     self.outputMouseData = function(evt,el){ 

     var pos = mouse.relativePosition(evt,el); 

     el.ctx.clearRect(0,0,el.width,el.height); 

     el.ctx.fillStyle = "white"; 
     el.ctx.font   = "bold 16px Arial"; 
     el.ctx.fillText(pos.x+' | '+pos.y, el.width-150,el.height-10); 

     } 
} 

    elements.addEvent(foreground,'mousemove', 
        function(evt){ canvas.outputMouseData(evt,foreground); } 
        ); 

Мой HTML

<div class="parent"> 
    <canvas id="canvas"></canvas> 
    <div class="menu">Menu output</div> 
</div> 

Родитель относительно позиционированный. Холст и меню являются абсолютными, но меню - z-index'd поверх холста.

Answer 1

HTML-события пузырятся по дереву узлов (вы можете прочитать хорошее объяснение об этом here).

Что это означает, что если вы приложите обработчик событий к элементу, который содержит другие элементы, что обработчик вызывается даже, когда событие происходит на дочерний элемент (при пузыриться не был явно прервана). Вы можете обернуть ваш холст & div в элемент оболочки (например, span) и приложить к нему обработчик. Вы получите событие независимо от z-индекса.

Вот краткий пример того, что код может выглядеть следующим образом (в getOffsetSum взятого из here):

var canvas = document.getElementById('canvas'); 
 
var canvasPos = getOffsetSum(canvas); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.fillStyle = "rgb(200,0,0)"; 
 
ctx.fillRect(0, 0, 99, 99); 
 

 
var container = document.getElementById('container'); 
 
var mousemove = document.getElementById('mousemove'); 
 
container.addEventListener('mousemove', function(evt) { 
 
    var pos = getOffsetSum(evt.target); 
 
    pos.top += evt.offsetY - canvasPos.top; 
 
    pos.left += evt.offsetX - canvasPos.left; 
 
    mousemove.innerHTML = 'offsetX: ' + evt.offsetX + ' | offsetY: ' + evt.offsetY + '<br/>' + 
 
    'canvasX: ' + pos.left + ' | canvasY: ' + pos.top; 
 
}); 
 

 
function getOffsetSum(elem) { 
 
    var top = 0, left = 0; 
 

 
    while (elem) { 
 
    top = top + parseInt(elem.offsetTop); 
 
    left = left + parseInt(elem.offsetLeft); 
 
    elem = elem.offsetParent; 
 
    } 
 

 
    return { 
 
    top: top, 
 
    left: left 
 
    } 
 
}

.ontop { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
}

<span id="container"> 
 
    <canvas id="canvas" width="100" height="100"></canvas> 
 
    <div class="ontop">ON TOP</div> 
 
</span> 
 
<div id="mousemove"></div>

Answer 2

Помещенных как холст и ваше меню DIV в контейнере DIV ,

Затем используйте делегацию событий jQuery для прослушивания событий mousemove в контейнере, но ваш холст отвечает на эти события mousemove.

$('#container').on('mousemove','#myCanvas',function(){ doSomething(); } 

Вы можете узнать больше о делегировании событий здесь: http://api.jquery.com/on/

Answer 3

Мои первоначальные мысли было добавить «MouseMove» событие самого документа (вместо холста элемента или элементов), а также отслеживать элементы используя evt.currTarget или evt.target. Таким образом, mousemove evt всегда будет присутствовать, нависнете ли вы над меню или холстом (или где угодно, если на то пошло).