浏览器如何处理JavaScript鼠标事件？

Question

I'm developing a web application where users can learn Spanish by putting words together like pieces of a puzzle. 我正在开发一个Web应用程序，用户可以通过将单词拼成一个拼图来学习西班牙语。 I've created some JavaScript to make the puzzle pieces "draggable" (I know there is a new D&D API with HTML5, but the way I did it even works on browsers that don't support that). 我创建了一些JavaScript，以使拼图块变得“可拖动”（我知道HTML5有一个新的D＆D API，但是我的方式甚至可以在不支持该功能的浏览器上使用）。

Anyway, everything works perfectly in IE (even my old IE7) and Firefox, but I ran into an interesting snag with Google Chrome: each piece could only be dragged once; 无论如何，一切都可以在IE（甚至是我的旧版IE7）和Firefox中完美运行，但我在Google Chrome上遇到了一个有趣的问题：每块只能拖一次； then they became "locked" (unable to move). 然后他们变得“锁定”（无法移动）。

So my question is, is there something that needs to be done differently for this to be compatible with Chrome? 所以我的问题是，要与Chrome兼容，是否需要做一些不同的事情？ I was thinking of maybe having the "drop" script refresh the browser every time the user drops a piece, but that would probably be a pain for users with slow connections... anyway I'm sure there's something I'm overlooking, but I'm not sure what it could be. 我当时想让用户每次放下一块代码时都使用“ drop”脚本刷新浏览器，但这对于连接速度较慢的用户来说可能是一件痛苦的事……无论如何，我确定我有一些事情要忽略，但是我不确定会是什么。 Here's my code: 这是我的代码：

<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

I spent some time looking into this, and it seems the "short answer is, the event listener is the solution. I found this site: 我花了一些时间对此进行调查，看来“简短的答案是，事件侦听器是解决方案。我找到了这个网站：

JavaScript mouse events tutorial JavaScript鼠标事件教程

And they have a demo that works exactly like mine, EXCEPT that they added the event functions in the script instead of the individual div elements. 他们有一个与我的工作完全一样的演示，除了他们在脚本中添加了事件函数而不是单个div元素。 I haven't had the chance to do try it in my code yet, but their demo works fine in Chrome as well as Firefox and IE. 我还没有机会在我的代码中尝试一下，但是他们的演示可以在Chrome以及Firefox和IE中正常运行。

浏览器如何处理JavaScript鼠标事件？

问题描述

1 个解决方案

解决方案1
0 2014-04-12 18:16:58

浏览器如何处理JavaScript鼠标事件？

问题描述

1 个解决方案

解决方案1 0 2014-04-12 18:16:58

解决方案1
0 2014-04-12 18:16:58