看看是不是你想要的，经测试：在chrome31，firefox25和IE8中能够正常使用，其他浏览器没有测试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">如下参考：
1页面复制有一个id为c2的div，下面有一个子div，下面有一个按钮，事件是用来点击100个adddiv。
2在event函数中，定义一个内容为degreediv字符的字符串变量。
3然后使用jquery的append将已知的div字符串添加到c2div，如下所示。
4运行页面，现在只看到一个div，如下图所示。
5单击下面的按钮来触发添加div的逻辑，如下所示。
<div id="tst" onmouseup="doit()">this is test</div>
<script>
function doit(){
var _tst = documentgetElementById("tst");
var _str = '<b>'+_tstinnerText+'</b>';
_tstinnerHTML = _str;
}
</script>
解决的办法是当触发onmouseout事件时，先判断鼠标是否在div内，如果在，说明鼠标并没有离开div，就不删除div，否则，删除之。OK,现在问题解决了。就是找到该div左上角和右下角坐标，判断鼠标的坐标是否在这一区域就可以了。divonmouseout=function(event){ var div = documentgetElementById("test"); var x=eventclientX; var y=eventclientY; var divx1 = divoffsetLeft; var divy1 = divoffsetTop; var divx2 = divoffsetLeft + divoffsetWidth; var divy2 = divoffsetTop + divoffsetHeight; if( x < divx1 || x > divx2 || y < divy1 || y > divy2){ //如果离开，则执行。。 } 后面为一些常用属性方便查找：clientHeight 获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。clientWidth 获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX, screenY是相对于用户显示器的位置网页可见区域宽： documentbodyclientWidth网页可见区域高： documentbodyclientHeight网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)网页可见区域高： documentbodyoffsetHeight (包括边线的宽)网页正文全文宽： documentbodyscrollWidth网页正文全文高： documentbodyscrollHeight网页被卷去的高： documentbodyscrollTop网页被卷去的左： documentbodyscrollLeft网页正文部分上： windowscreenTop网页正文部分左： windowscreenLeft屏幕分辨率的高： windowscreenheight屏幕分辨率的宽： windowscreenwidth屏幕可用工作区高度： windowscreenavailHeight屏幕可用工作区宽度：windowscreenavailWidth
<div id="one" class="testDiv"></div>
<div id="two" class="testDiv"></div>
<div id="three" class="testDiv"></div>
<div id="four" class="testDiv"></div>documentbodyonmouseover = function(event){
event = event || windowevent;
var target = eventtarget || eventsrcElement;
switch(targetid){
case "one":
alert(targetid)
break;
case "two":
alert(targetid)
break;
case "three":
alert(targetid)
break;
case "four":
alert(targetid)
break;
}
};testDiv{
width: 200px;
height: 100px;
background: red;
} //以此类推。你可以吧6个div 放在一个大的div中,id为testDiv
documentgetElementById('testDiv')onmouseover = function(event){
event = event || windowevent;
var target = eventtarget || eventsrcElement;
alert(targetid) //这样就不用写很多判断
};
以上就是关于鼠标拖拽div中的内容全部的内容，包括:鼠标拖拽div中的内容、如何用鼠标获得多个div层的标识 js、js如何实现：在页面中任意位置点击鼠标，则在该位置显示一个div等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）