Question

我正在开发一个Web应用程序，用户可以通过将单词拼成一块拼图来学习西班牙语。我已经创建了一些JavaScript来制作拼图＆＃34;可拖动＆＃34; （我知道有一个新的D＆amp; D API与HTML5，但我这样做的方式甚至适用于那些不支持它的浏览器。）

无论如何，一切都在IE（甚至我的旧IE7）和Firefox中完美运行，但我遇到了谷歌Chrome的一个有趣的障碍：每件只能拖一次;然后他们变得被锁定了＃34; （无法移动）。

所以我的问题是，为了与Chrome兼容，是否需要采取不同的措施？我想的可能是＆＃34; drop＆＃34;每次用户丢弃一块时，脚本都会刷新浏览器，但对于连接速度慢的用户来说，这可能会很麻烦......无论如何，我确定有一些我忽视的东西，但是我＆＃ 39;我不确定它可能是什么。这是我的代码：

<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>

Answer 1

我花了一些时间研究这个，似乎“简短的回答是，事件监听器是解决方案。我找到了这个网站：

JavaScript mouse events tutorial

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

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

1 个答案: