//计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值 var deltaX=event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top);
这个问题涉及面相当广阿浏览器自动生成Event对象，并调用你的句柄函数在说明原理前，先看下面代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function doClick(e) { alert(e); }; window.onload = function() { document.getElementById('container').onclick = doClick; } </script> </head> <body> <div id="container" style="width:200px; height:200px; border-style:solid; border-width:1px; background-color:#ffffff">
</div> </body> </html>点击div，IE下无效，FF和chrome都有效再看下面代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function doClick(e) { alert(window.event); }; window.onload = function() { document.getElementById('container').onclick = doClick; } </script> </head> <body> <div id="container" style="width:200px; height:200px; border-style:solid; border-width:1px; background-color:#ffffff">
</div> </body> </html>IE下有效，FF下无效，chrome下有效事件肯定是事件源触发的，而事件源肯定在浏览器里。而我们所做的onclick=function....，那个不过是浏览器事件触发之后，调用我们这个句柄的监听器。按照这个层面上的理解，流程为：浏览器事件源触发事件，事件被监听器捕捉到，然后通知我们写的句柄。也就是这段onclick=function中function里面的内容。其中，lz的evt是由浏览器自动生成并调用。本来大家都是遵循这条原则的。但是ie例外。根据上面的代码，IE是通过window.event得到Event对象的。而FF下是通过w3c标准，以参数形式传进来的。而chrome下兼容两种方式.所以lz的这种写法，其实不标准。正确的兼容全浏览器的写法为 function doClick(e) { var event = e || window.event; };不知道我这样解释你听得懂瓦
function beginDrag(elementToDrag,event)
{
//该元素当前位于何处
//该元素的样式性质必须具有left和top css属性
//此外，我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序
// 注意，它们被注册为文档的捕捉事件处理程序
// 在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
// 在按钮被释放的时候，它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我们已经处理了该事件，不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function doClick(e) {
alert(e);
}; window.onload = function() {
document.getElementById('container').onclick = doClick;
}
</script>
</head>
<body>
<div id="container" style="width:200px; height:200px; border-style:solid; border-width:1px; background-color:#ffffff">
</div>
</body>
</html>点击div，IE下无效，FF和chrome都有效再看下面代码<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function doClick(e) {
alert(window.event);
}; window.onload = function() {
document.getElementById('container').onclick = doClick;
}
</script>
</head>
<body>
<div id="container" style="width:200px; height:200px; border-style:solid; border-width:1px; background-color:#ffffff">
</div>
</body>
</html>IE下有效，FF下无效，chrome下有效事件肯定是事件源触发的，而事件源肯定在浏览器里。而我们所做的onclick=function....，那个不过是浏览器事件触发之后，调用我们这个句柄的监听器。按照这个层面上的理解，流程为：浏览器事件源触发事件，事件被监听器捕捉到，然后通知我们写的句柄。也就是这段onclick=function中function里面的内容。其中，lz的evt是由浏览器自动生成并调用。本来大家都是遵循这条原则的。但是ie例外。根据上面的代码，IE是通过window.event得到Event对象的。而FF下是通过w3c标准，以参数形式传进来的。而chrome下兼容两种方式.所以lz的这种写法，其实不标准。正确的兼容全浏览器的写法为
function doClick(e) {
var event = e || window.event;
};不知道我这样解释你听得懂瓦