javascript - 另一个元素后面的 Canvas 上的事件监听器

Question

我的 Canvas 上附加了一个鼠标移动事件监听器。但在我的 Canvas 之上是一个具有较高 z-index 的 div，其中包含一些菜单按钮。

我面临的问题是，我希望当鼠标位于菜单元素上方时鼠标移动事件仍然激活 - 其中菜单元素位于 Canvas 元素上方。

目前，它的行为就好像鼠标不再位于 Canvas 顶部一样，因为由于 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>

父级是相对定位的。 Canvas 和菜单是绝对定位的，但菜单是在 Canvas 顶部的 z 索引。

Answer 1

HTML 事件正在节点树中冒泡(您可以阅读有关该事件的详细解释 here )。

这意味着，如果您将事件处理程序附加到包含其他元素的元素，则当事件发生在子元素上时，该处理程序甚至会被调用(假设冒泡未显式中止) )。您可以将 Canvas 和 div 包装在包装元素(例如跨度)中，然后在其上附加处理程序。无论 z-index 如何，您都会收到事件。

下面是代码的一个简短示例(取自 here 的 getOffsetSum ):

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>