Question

我想用画布覆盖iframe，以便我可以根据iframe的内容绘制注释。

但是，我还希望iframe正常运行，因此点击，滚动，键盘输入等应该通过画布。画布应处理某些事件，例如单击，例如单击示例中的黄色方块。

这里只是点击事件处理程序，应该是所有需要纠正的处理程序。

hostCanvas.addEventListener('click', function(event){
    //First, test if entity was clicked.
  var x = event.layerX,
      y = event.layerY;

  var found = false;
  $.each(entities, function(i, entity){
    if (y >= entity.dimensions.y && 
        y <= entity.dimensions.y + entity.dimensions.h && 
        x > entity.dimensions.x && 
        x < entity.dimensions.x + entity.dimensions.w) {
      console.log("entity click detected");
      found = true;
      return;
    }
  });


  if(!found){
    //Otherwise, forward event to element under.
    var under = document.elementFromPoint(event.clientX, event.clientY);

    var evt = new MouseEvent(event.type, {
      view: window,
      bubbles: true,
      cancelable: true,
      screenX: event.screenX,
      screenY: event.screenY,
      clientX: event.clientX,
      clientY: event.clientY,
      ctrlKey: event.ctrlKey,
      shiftKey: event.shiftKey,
      altKey: event.altKey,
      metaKey: event.metaKey,
      button: event.button,
      relatedTarget: event.relatedTarget
    });

    $(hostCanvas).css('pointer-events', 'none');
    console.log("Forwarded event to:");
    console.log(under);
    under.dispatchEvent(evt);
    $(hostCanvas).css('pointer-events', 'auto');
  }

});

工作示例：https://jsfiddle.net/po1zdtz7/5/

目前，该事件似乎已发送到iframe，但没有发生任何事情（没有＆＃34;点击＆＃34;提醒）。

澄清，预期结果是（点击时）：
黄色/橙色：控制台说＆＃34;实体点击检测到＆＃34;
红色：应该向前点击后面的元素（iframe，结果如下），然后应该处理点击事件。
iframe（在绿色边框内）：应该提出一个警告说＆＃34;点击＆＃34;

更新
我已经完成了CBroe评论如下：

iframe是否始终显示与小提琴示例中相同的域中的内容？在这种情况下，我认为如果你在iframe上进行事件处理可能会更容易，并且只能从那里捕获并处理你想要影响画布的点击。

我现在已经得到它以便iframe正常接受点击，首先将其传递给画布，决定是否应该处理它，如果是，则取消iframe中的任何操作，否则， iframe处理正常。

从画布点击点击

0 个答案: