ie和firefox上都运行流畅的网页分割条

最新推荐文章于 2019-03-13 21:24:23 发布

chinabluedolphin

最新推荐文章于 2019-03-13 21:24:23 发布

阅读量97

点赞数

分类专栏： javascript 文章标签： IE Firefox UP 工作

本文链接：https://blog.csdn.net/yiyuyiyu/article/details/83528858

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这两天因工作需要做了一个网页分割条，期间碰到不少问题，好在最后都解决了，最后
版本在ie8和firefox3.5上都能流畅运行，现总结一下：

1. 拖动分割条的一个问题是要把鼠标的移动和释放事件不间断地捕获到并进行处理，当
鼠标快速移动时，要保证即使鼠标移出了分割条，进入页面其他元素的范围内，这些事
件也能被捕获到并进行相应的处理。在ie中，这需要使用setCapture()方法，拖动动作
完成后还要用releaseCapture()方法释放。但firefox不支持该方法，网上有的说可以
用window.captureEvents方法，但我在firefox中试过也不行，找了找资料据说这是
netscape的特性，firefox只实现了一个空的方法，并不起作用。firefox解决这一问题
的办法是按下分割条后，就将鼠标移动和释放的事件处理方法绑定到document上，然后
在鼠标释放的时候再进行移除。

2. 拖动分割条中碰到的第二个问题是，在firefox中，拖动很容易中断，可能是因为一
旦鼠标移出了分割条，相应的鼠标事件在某些情况下会被页面中的其他元素截留，这个
问题可以通过event的preventDefault()方法解决。

最后代码如下：


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk">
		<style>
			.shadowDivA {
				overflow: scroll;
				width: 200px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 0px;
				background-color: yellow;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
			.shadowDivB {
				overflow: scroll;
				width: 500px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 205px;
				background-color: blue;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
			.shadowDivM {
				width: 5px;
				height: 100%;
				position: absolute;
				top: 0px ; left : 200px;
				background-color: grey;
				cursor:e-resize;
				filter: alpha(opacity = 70);
				opacity: 0.7;
			}
		</style>
		<script type="text/javascript"> 
			var flag = false ;
			var objSplitter = false;

			function down(event, obj){
				if(!flag){
					if(obj.setCapture)
						obj.setCapture();
					else {
						document.addEventListener('mouseup', up, true);
						document.addEventListener('mousemove', move, true);
						event.preventDefault();
					}

					flag = true ;
					objSplitter = obj;
				}
			}

			function up(event){
				if(flag){
					if(objSplitter.releaseCapture)
						objSplitter.releaseCapture();
					else {
						document.removeEventListener('mouseup', up, true);
						document.removeEventListener('mousemove', move, true);
						event.preventDefault();
					}

					flag = false ;
				}
			}

			function move(event){
				if(flag){
					var obj1 = document.getElementById("a") ; 
					var obj2 = document.getElementById("b") ;
					obj1.style.width = event.clientX + "px" ;
					obj2.style.left = (event.clientX + 5) + "px" ;
					obj2.style.width = (700 - event.clientX) + "px" ; 

					objSplitter.style.left = event.clientX + "px" ;
					if(!objSplitter.releaseCapture) {
						event.preventDefault();
					}
				}
			}
		</script> 
</head>

<body>
	<div id="a" class="shadowDivA">
	</div>
	<div class="shadowDivM" onmousedown="down(event, this);" onmouseup="up(event);" onmousemove="move(event);">
	</div>
	<div id="b" class="shadowDivB">
	</div>
</body>
</html>