javascript - 在 Chrome 应用中实现 onmouse 事件

Question

我创建了这段代码:

window.onload = function() {


  for (var i = 10; i < 100; i += 10) {
    document.getElementById("overlayInner").innerHTML += '<div style="top:' + ((8 * i) - 15) + 'px;" class="number lat lat' + i + '">' + i + '</div>';
    document.getElementById("overlayInner").innerHTML += '<span style="left:' + ((8 * i) - 15) + 'px;" class="number lon lon' + i + '">' + i + '</span>';
  }

  var map_canvas = document.getElementById("map");
  var context = map_canvas.getContext("2d");

  for (var x = 80; x < 800; x += 80) {
    context.moveTo(x, 45);
    context.lineTo(x, 755);
  }

  var count = 1;
  for (var y = 80; y < 800; y += 80) {
    if (count != 10) {
      context.moveTo(50, y);
      context.lineTo(750, y);
    }
  }
  context.strokeStyle = "#7c7c7c";
  context.stroke();

};


function move(id, evt) {
  var e = document.getElementById(id);
  e.style.display = "block";
  e.style.left = evt.pageX + 10 + "px";
  e.style.top = evt.pageY + 10 + "px";

  e.innerHTML = "X: " + Math.round(((evt.pageX * 1.25) / 10)) + " / Y: " + Math.round(((evt.pageY * 1.25) / 10));
}

function hide(id) {
  document.getElementById(id).style.display = "none";
}

/* CSS file placeholder. */

body {
  padding: 0;
  margin: 0;
  background: #313335;
}
#map_container {
  position: relative;
}
#map {
  width: 800px;
  height: 800px;
}
#overlay {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}
#overlay:hover {
  cursor: crosshair;
}
#overlayInner {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.number {
  background: white;
  padding: 5px;
  border: 2px solid black;
  position: absolute;
}
.lat {
  left: 25px;
}
.lon {
  bottom: 25px;
}
canvas {
  border: 1px solid black;
  position: relative;
}
canvas:hover {
  cursor: crosshair;
}
#coordinates {
  position: absolute;
  color: white;
  display: none;
}

<canvas id="map" width="800px" height="800px"></canvas>
<div id="overlay" onmousemove="move('coordinates',event)" onmouseout="hide('coordinates')">
  <div id="overlayInner"></div>
</div>
<span id="coordinates"></span>

当我通过堆栈片段运行它或将其作为网站运行时，它似乎可以在 Chrome 浏览器中工作。但是，当我将其作为 Chrome 应用程序运行时，我没有得到任何坐标。

我是 Chrome 应用新手，所以我不确定是否可以实现这一目标。但是，我想我会问一下是否需要以不同的方式编写，也许我的代码中存在浏览器在运行时修复的错误？这段代码只是标准的 Javascript，所以我不明白为什么它不起作用。

Answer 1

Chrome 扩展程序不允许内联事件处理程序

onmousemove="move('坐标',事件)"onmouseout="隐藏('坐标')"

下面的代码应该可以解决问题。

eO = document.getElementById('overlay');

eO.addEventListener("mousemove", function(evt){
   move('coordinates', evt);
});

eO.addEventListener("mouseout", function(){
    hide('coordinates');
});