googlechrome-浏览器处理JavaScript鼠标事件的方式不同

google chrome - Difference in how browsers handle JavaScript mouse events?

本文关键字：方式不 事件 鼠标 浏览器 处理 JavaScript googlechrome-      更新时间：2023-09-26

我正在开发一个web应用程序，用户可以通过将单词像拼图一样拼在一起来学习西班牙语。我已经创建了一些JavaScript，使拼图变得"可拖动"（我知道有一种新的带有HTML5的D&D API，但我的做法甚至适用于不支持它的浏览器）。

无论如何，IE（甚至是我的旧IE7）和Firefox中的一切都很完美，但我在谷歌Chrome上遇到了一个有趣的障碍：每一块只能拖一次；然后他们被"锁住"了（无法移动）。

所以我的问题是，为了与Chrome兼容，是否需要采取不同的措施？我在想，也许每次用户放下一块东西时，都会让"放下"脚本刷新浏览器，但这可能会让连接缓慢的用户感到痛苦。。。不管怎样，我确信我忽略了一些东西，但我不确定它可能是什么。这是我的代码：

<html>
<head>
<title> Making Sense out o Spanish </title>
<style>
#div1, #div2{
 position: absolute;
 left: 100px; top: 100px;
 width: 80px; height: 60px;
 background-color: yellow;
}
#div3, #div4{
 position: absolute;
 left: 200px; top: 200px;
 width: 80px; height: 60px;
 background-color: green;
}
</style>
<script>
var activePiece = "nothing";
function move(id,x,y){
 if (activePiece == id){
  var element = document.getElementById(id);
  element.style.left = x-40 + "px";
  element.style.top = y-30 + "px";
 }
}
function go(id){
 activePiece = id;
 var element = document.getElementById(id);
 element.style.zIndex = "1";
}
function stop(id){
 activePiece = "nothing";
 var element = document.getElementById(id);
 element.style.zIndex = "-1";
}
</script>
</head>
<body bgcolor="blue" onmousemove="update(event.clientX,event.clientY);">
<div id="div1" onmousedown="go('div1');" onmouseup="stop('div1');" onmousemove="move('div1',event.clientX,event.clientY);">Quiero</div>
<div id="div2" onmousedown="go('div2');" onmouseup="stop('div2');" onmousemove="move('div2',event.clientX,event.clientY);">Necesito</div>
<div id="div3" onmousedown="go('div3');" onmouseup="stop('div3');" onmousemove="move('div3',event.clientX,event.clientY);">bailar</div>
<div id="div4" onmousedown="go('div4');" onmouseup="stop('div4');" onmousemove="move('div4',event.clientX,event.clientY);">trabajar</div>
</body>
</html>

我花了一些时间研究这个问题，似乎"简短的答案是，事件侦听器就是解决方案。我发现了这个网站：

JavaScript鼠标事件教程

他们的演示与我的完全一样，只是在脚本中添加了事件函数，而不是单独的div元素。我还没有机会在我的代码中尝试它，但他们的演示在Chrome、Firefox和IE中运行良好。

相关文章：