【转】javascript鼠标拉框（框选）的实现
这个功能，我花了好几天的时间才实现，主要是在拉框的时候，我可以实现，但是，我想在松开鼠标的时候，进行自己的业务处理，但是，怎么也不能响应鼠标的mouseup事件，也看了不少的例子，都是只有拉框，在移动事件里面可以实现功能，但是，鼠标的抬起事件不能响应。有的，可以相应事件，但是要鼠标在多点一下，后来就找了好多的资料，了解了事件的处理，才把这个问题搞定。
现在把代码重新整理了一下，希望对大家能有所帮助。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<title>拉框</title>
</head>
<body>
<div id='lay1'
onmousedown='down(event)'
onmouseup='up(event)'
onmousemove='move(event)'
style='top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue;'
>
<div id='rect'
style='position:absolute;background-color: #FF99FF'
>
</div>
</div>
<script language="javascript">
// 是否需要(允许)处理鼠标的移动事件,默认识不处理
var select = false;
var rect = document.getElementById("rect");
// 设置默认值,目的是隐藏图层
rect.style.width = 0;
rect.style.height = 0;
rect.style.visibility = 'hidden';
//让你要画的图层位于最上层
rect.style.zIndex = 1000;
// 记录鼠标按下时的坐标
var downX = 0;
var downY = 0;
// 记录鼠标抬起时候的坐标
var mouseX2=downX;
var mouseY2=downY;
//处理鼠标按下事件
function down(event){
// 鼠标按下时才允许处理鼠标的移动事件
select = true;
//让你要画框的那个图层显示出来
//rect.style.visibility = 'visible';
// 取得鼠标按下时的坐标位置
downX = event.clientX;
downY = event.clientY;
//设置你要画的矩形框的起点位置
rect.style.left = downX;
rect.style.top = downY;
}
//鼠标抬起事件
function up(event){
//鼠标抬起,就不允许在处理鼠标移动事件
select = false;
//隐藏图层
rect.style.visibility = 'hidden';
}
//鼠标移动事件,最主要的事件
function move(event){
// 取得鼠标移动时的坐标位置
mouseX2 = event.clientX;
mouseY2 = event.clientY;
// 设置拉框的大小
rect.style.width = Math.abs( mouseX2 - downX );
rect.style.height = Math.abs( mouseY2 - downY );
/*
这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
*/
if(select){
rect.style.visibility = 'visible';
// A part
if( mouseX2 < downX && mouseY2 < downY ){
rect.style.left = mouseX2;
rect.style.top = mouseY2 ;
}
// B part
if( mouseX2 > downX && mouseY2 < downY){
rect.style.left = downX ;
rect.style.top = mouseY2;
}
// C part
if( mouseX2 < downX && mouseY2 > downY){
rect.style.left = mouseX2;
rect.style.top = downY ;
}
// D part
if( mouseX2 > downX && mouseY2 > downY ){
rect.style.left = downX ;
rect.style.top = downY;
}
}
/*
这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,
拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.
这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,
这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,
为了这两句话,为了实现鼠标拉框,我搞了几天的时间.
*/
window.event.cancelBubble = true;
window.event.returnValue = false;
function getDivOffsetLeft(){
var lay1 = document.getElementById("lay1");
//var rect = document.getElementById("rect");
return lay1.offsetLeft;
}
function getDivOffsetTop(){
var lay1 = document.getElementById("lay1");
//var rect = document.getElementById("rect");
return lay1.offsetTop;
}
}
</script>
</body>
</html>
