Javascript实现鼠标框选择操作 而不是点击选择

本文通过一个例子分享了用Javascript实现的鼠标框选择操作，这绝不是点击选择，供大家参考。具体内容如下。

渲染：

代码：

html头/头样式体{ padd :100 px} .fileDiv { float:left宽度宽度：100像素高度：100 px文本对齐：居中；线高：100 pxfont-size :12 pxborder:1px固体# ccc右边距：10 px边距-底部：10 px} .选择了{border:1px固体红色；背景-颜色： # d6dff 7；}/style脚本类型=' text/JavaScript '(function(){ document。onmousedown=function(){ var selList=[]；var文件节点=文档。getelementsbytagname(' div ')；for(var I=0；我文件节点。长度；I){ if(文件节点[I]。类名。indexof(' FileDiv ')！=-1) {文件节点[i].fileDivsellist .推送(文件节点[I])；} } var is select=true var evt=window . event | |引数[0];var startX=(evt。x | | evt。client x)；var startY=(evt。y | | evt。客户关系)；var selDiv=文档。创建元素(' div ')；塞尔维。风格。CSS文本='位置：绝对；宽度：0 pxheight :0 px font-size :0 px；余量：0 pxpadding :0 pxborder :1 px虚线# 0099FF背景-颜色： # C3D5EDz指数：1000;滤镜： alpha(opa city 336060)；opa city 33600.6 display : none '；selDiv.id=' selectDivdocument。尸体。append child(SelDiV)；塞尔维。风格。left=startX ' px塞尔维。风格。top=startY ' pxvar _ x=nullvar _ y=nullclearEventBubble(evt)；文件。onmousemove=function(){ evt=window。事件| |参数[0]；if(is select){ if(SelDiv。风格。display==' none '){ SelDiv。风格。display=} _ x=(evt。x | | evt。客户端x)；_ y=(evt。y | | evt。客户关系)；selDiv.style.left=Math.min(_x，startX)' px '；selDiv.style.top=Math.min(_y，startY)' px '；塞尔维。风格。宽度=数学。ABS(_ x-StartX)' px '；塞尔维。风格。身高=数学。ABS(_ y-StartY)' px '；//- 关键算法- var _l=selDiv.offsetLeft，_ t=seldiv . offsettopvar _ w=seldiv . offsettwidth，_ h=seldiv . offsethethightfor(var I=0；长度；i ) { var sl=selList[i].在第一个销售清单之外offsetLeftvar st=selList[i].偏右销售列表[i].offsetTopif (sl _l st _t selList[i]).offsetLeft _l _w selList[i].offsetTop _ t _ h){ if(selList[I]。类名。indexof(' seled ')==-1){ selList[I].类名=selList[i].类名“seled”；} } else { if(selList[I])。类名。indexof(' seled ')！=-1) { selList[i].class name=' fileDiv } } } } clearEventBubble(evt)；}文档。onmouseup=function(){ is select=false；if(SelDiv){文档。尸体。移除子级(SelDiv)；showSelDiv(selList)；} selList=null，_x=null，_y=null，selDiv=null，startX=null，startY=null，evt=null } } })；函数clearEventBubble(evt){ if(evt。stopper propagation)evt。stopperpagation()；else evt . cancelubble=true if(evt。preventdefault)evt。prevent default()；else evt.returnValue=false}函数showSelDiv(arr){ var count=0；var selInfo=for(var I=0；一、长度；如果。类名。indexof(' seled ')！=-1){ count；selInfo=arr[i].innerHTML ' \ n} }警报('共选择伯爵个文件，分别是：\ n ' selInfo)；}/脚本正文div类=' fileDiv '文件1/div类=' fileDiv '文件2/div类=' fileDiv '文件3/div类=' fileDiv '文件4/div类=' fileDiv '文件5/div类=' fileDiv '文件6/div类=' fileDiv '文件7/div类=' fileDiv '文件8/div类=' fileDiv '文件9/div/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助。