用javascript实现鼠标框选

起初是打算兼容 Netscape 和 FireFox 等浏览器的，但这些浏览器中不支持 style.pixelLeft，得使用 style.left 之类的（style.pixelLeft 为数字无单位，style.left 为文本有单位），实际使用中发现效果很不好，有延迟状，所以还是使用 style.pixelLeft，缺点是仅支持 IE 系列浏览器。

鼠标框选框

document.body.clientWidth || event.clientY>document.body.clientHeight)
{
return;
}

startPointX = document.body.scrollLeft + event.clientX;
startPointY = document.body.scrollTop + event.clientY;

box.style.pixelLeft = startPointX;
box.style.pixelTop = startPointY;
box.style.pixelWidth = 0;
box.style.pixelHeight = 0;
box.style.display = "block";
boxWorking = true;
}

//改变鼠标框选框大小
function ResizeBox()
{
//必须要先按下鼠标左键或右键
if (!boxWorking)
{
return;
}

var endPointX = document.body.scrollLeft + event.clientX;
var endPointY = document.body.scrollTop + event.clientY;

//鼠标左移还是右移
if (endPointX >= startPointX )
{
box.style.pixelLeft = startPointX;
box.style.pixelWidth = endPointX - startPointX;
}
else
{
box.style.pixelLeft = endPointX;
box.style.pixelWidth = startPointX - endPointX;
}

//鼠标上移还是下移
if (endPointY >= startPointY )
{
box.style.pixelTop = startPointY;
box.style.pixelHeight = endPointY - startPointY;
}
else
{
box.style.pixelTop = endPointY;
box.style.pixelHeight = startPointY - endPointY;
}
}

//鼠标移动结束，隐藏鼠标框选框，设置相关数据
//仅鼠标左键或右键时有效
function EndBox()
{
//鼠标键判断
if (event.button!=1 && event.button!=2)
{
return;
}

box.style.display = "none";
boxWorking = false;
}

document.body.onmousedown= StartBox;
document.body.onmousemove = ResizeBox;
document.body.onmouseup = EndBox;
//-->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面这个只在区域内有效

鼠标框选框

document.body.clientWidth || event.clientY>document.body.clientHeight)
{
return;
}

startPointX = document.body.scrollLeft + event.clientX;
startPointY = document.body.scrollTop + event.clientY;

box.style.pixelLeft = startPointX;
box.style.pixelTop = startPointY;
box.style.pixelWidth = 0;
box.style.pixelHeight = 0;
box.style.display = "block";
boxWorking = true;
}

//改变鼠标框选框大小
function ResizeBox()
{
//必须要先按下鼠标左键或右键
if (!boxWorking)
{
return;
}

var endPointX = document.body.scrollLeft + event.clientX;
var endPointY = document.body.scrollTop + event.clientY;

//鼠标左移还是右移
if (endPointX >= startPointX )
{
endPointX = (endPointX=content.offsetLeft)?endPointX:content.offsetLeft;
box.style.pixelLeft = endPointX;
box.style.pixelWidth = startPointX - endPointX;
}

//鼠标上移还是下移
if (endPointY >= startPointY )
{
endPointY = (endPointY=content.offsetTop)?endPointY:content.offsetTop;
box.style.pixelTop = endPointY;
box.style.pixelHeight = startPointY - endPointY;
}
}

//鼠标移动结束，隐藏鼠标框选框，设置相关数据
//仅鼠标左键或右键时有效
function EndBox()
{
//鼠标键判断
if (event.button!=1 && event.button!=2)
{
return;
}

box.style.display = "none";
boxWorking = false;
}

content.onmousedown= StartBox;
document.body.onmousemove = ResizeBox;
document.body.onmouseup = EndBox;
//-->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]