在另一个元素后面的画布上的事件监听器 [英] Event listener on a canvas behind another element

问题描述

我的画布上附有鼠标移动事件监听器。但是在我的画布上是一个具有更高z-index的div，它包含一些菜单按钮。

I have a mouse move event listener attached to my canvas. But on top of my canvas is a div with a higher z-index, this contains some menu buttons.

我面临的问题是，我想将鼠标移动事件发送到当鼠标位于菜单元素上时仍然激活 - 该元素位于画布元素上。

The problem i face is, i want the mouse move event to still activate when the mouse is over the menu element - of which is over the canvas element.

目前，它就像鼠标不再位于画布上一样因为菜单元素由于z-index顺序而优先。

Currently, it acts as if the mouse is no longer on top of the canvas because the menu element takes precedence due to z-index order.

有没有办法让这个事件监听器忽略任何阻碍的元素？

Is there a way to make this event listener ignore any elements that get in the way?

我的代码：

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。

Parent is relative positioned. Canvas and menu are absolute positioned but menu is z-index'd on top of canvas.

推荐答案

HTML事件正在冒泡节点树（您可以阅读有关此处的详细说明。）

HTML Events are bubbling up the node tree (You can read a good explanation about that here).

这意味着如果将事件处理程序附加到包含其他元素的元素，则当子元素上发生事件时，该处理程序将被称为甚至（给定冒泡未明确中止） ）。你可以包装你的画布& div包装元素（例如span）并在其上附加处理程序。无论z-index如何，你都会得到这个事件。

What that means is that if you attach an event handler to an element that contains other elements, that handler is called even when the event occurs on a child element (given bubbling wasn't explicitly aborted). You can wrap your canvas & div in a wrapper element (a span for example) and attach the handler on that. You'll get the event regardless of z-index.

以下是代码外观的简短示例（取自这里）：

Here's a short example of what the code could look like (the getOffsetSum of taken from 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>

这篇关于在另一个元素后面的画布上的事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！