首页 文章

在另一个元素后面的画布上的事件监听器

提问于
浏览 次
0

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

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

目前，它的作用就好像鼠标不再位于画布顶部，因为菜单元素由于z-index顺序而优先 .

有没有办法让这个事件监听器忽略任何妨碍的方法？

我的代码：

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 .

javascript html5 canvas

3 回答

  • 3

    HTML事件正在冒泡节点树（你可以阅读关于here的一个很好的解释） .

    这意味着如果你将一个事件处理程序附加到包含其他元素的元素，即使在子元素上发生事件时也会调用该处理程序（给定冒泡不是z-index而不是'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 .

    以下是代码外观的简短示例（从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 + '
    ' +
    '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>
    回复于
  • 0

    将canvas和menu-div放入容器div中 .

    然后使用jQuery事件委托来侦听容器上的mousemove事件，但让画布响应那些mousemove事件 .

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

    您可以在此处了解有关活动委派的更多信息：http://api.jquery.com/on/

    回复于
  • 1

    我最初的想法是将“mousemove”事件添加到文档本身（而不是canvas元素或元素），并使用evt.currTarget或evt.target跟踪元素 . 通过这种方式，无论您将鼠标悬停在菜单或画布上（或任何地方），mousemove将始终存在 .

    回复于

相关问题