题记

上一节中说的拖拽在ie7下有个bug。就是在拖拽的过程中会选中文字。这一节展示的是一个兼容的版本。


使用的是setCapture和releaseCapture这对东西。这对东西的作用是事件捕获,释放事件捕获。通俗点来说,就是一旦某个元素开始调用捕获方法(setCapture),页面中所有的事件都会跑到这个元素上来。所以相应的,当我们使用完毕这个属性后要用releaseCapture(释放捕获)

demo

最好的说明就是看demo:猛戳这里


补充(重要)

在调试的过程中发现一个问题。就是在ff和chrome下window.event都是undefined,传入参数获取event对象的方法不是在所有函数里都通用,而是必须在事件处理的匿名函数中才可以。有兴趣的可以运行一下这个小代码:

<!doctype html>
<html>
	<input type="button" value="click" id="btn1" />
	<script>
		console.log(window.event);	
		var oBtn = document.getElementById("btn1");
		oBtn.onclick = function(e){
			console.log(e);
		}
		
		function noEvent(e){
			console.log("---"+e);
		}
		noEvent();
	</script>
</html>

运行的结果如图所示(火狐和chrome下面的显示结果一样):

8BRIZ8IW[})6J{`~[(AJIKO.png

最后,我是通过这样的方法解决的:

function getPos(){
    var sTop  = document.documentElement.scrollTop || document.body.scrollTop;
    var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var e=arguments.callee.caller.arguments[0] || window.event; //关键在这里
    return {x : sLeft + e.clientX, y : sTop + e.clientY};
}

原理就是通过arguments.callee.caller.arguments[0]解决的。这句代码的意思是获得arguments的callee,也就是getPos。然后获得getPos的caller,也就是事件匿名函数了。而匿名函数的第一个参数就是event对象。这样问题就解决了。至于后面为什么还要加上window.event这个东西,是因为ie7下不支持arguments。