ff
下有那个bug 原因是 你 可能触发了
window.getSelection && window.getSelection().removeAllRanges();把选择的清楚了
在移动事件中加ie 下这个 bug
要用鼠标的 获得事件将其锁定不能选中其他的
比如
obj 是你要的对象
if(obj.setCapture)
{
//就把改事件的 onlosecapture 删除了,删除中obj.releaseCapture() ,然后重新捕获鼠标事件
}
推荐楼主 用封装的写法便于修改
贴下 我师傅教我写的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Drag</title>
<script type="text/javascript">
//var rePos = function () {
// return !window.opera && document.documentElement.getBoundingClientRect && function (o) {
// var pos = o.getBoundingClientRect()
// , root = o.ownerDocument
// , x = pos.left + root.documentElement.scrollLeft - 2
// , y = pos.top + root.documentElement.scrollTop - 2;
//
// try {
// var f = root.parentWindow || null;
// if (f) {
// var offset = 2 - (f.frameBorder || 1) * 2;
// x += offset, y += offset;
// }
// } catch (exp) {}
// return { x : x, y : y };
// } || function (o) {
// var x = 0, y = 0;
// do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
// return { 'x' : x, 'y' : y };
// };
//}();
var rePos = function () {
return document.documentElement.getBoundingClientRect && function (o) {//返回一个矩形区域
var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
return { x : pos.left + root.documentElement.scrollLeft, y : pos.top + root.documentElement.scrollTop };
} || function (o) {
var x = 0, y = 0;
do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
return { 'x' : x, 'y' : y };
};
}();var Drag = { X : 0, Y : 0, MF : null, EF : null, BF : null
, AE : function (element, type, listener) {
//添加
var wc = this, listeners = function () { listener.apply(wc, arguments); };
if (element.addEventListener) element.addEventListener(new String(type).substr(2), listeners, false);
else if (element.attachEvent) element.attachEvent(type, listeners);
return listeners;
}
, DE : function (element, type, listener) {
//删除
if (element.addEventListener) element.removeEventListener(new String(type).substr(2), listener, false);
else if (element.attachEvent) element.detachEvent(type, listener);
}
, start : function (moveObj) {
//开始
if (this.MO) return;
var pos = rePos(this.MO = moveObj), e = window.event || arguments.callee.caller.arguments[0];
this.X = document.documentElement.scrollLeft + e.clientX - pos.x;
this.Y = document.documentElement.scrollTop + e.clientY - pos.y;
if (moveObj.setCapture) {
this.BF = this.AE(moveObj, 'onlosecapture', this.end);
moveObj.setCapture();
} else {
this.BF = this.AE(window, 'onblur', this.end);
}
this.MF = this.AE(document, 'onmousemove', this.move);
this.EF = this.AE(document, 'onmouseup', this.end);
}
, move : function (e) {
//移动中
var e = window.event || e;
window.getSelection && window.getSelection().removeAllRanges();
with (this.MO.style) {
left = document.documentElement.scrollLeft + e.clientX - this.X + 'px';
top = document.documentElement.scrollTop + e.clientY - this.Y + 'px';
}
//IEscroll问题无视^^
}
, end : function () {
//结束
if (this.MO.setCapture) {
this.DE(this.MO, 'onlosecapture', this.BF);
this.MO.releaseCapture();
} else {
this.DE(window, 'onblur', this.BF);
}
this.DE(document, 'onmousemove', this.MF);
this.DE(document, 'onmouseup', this.EF);
this.MO = this.BF = this.MF = this.EF = null;
}
};
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:#FF0000;position:absolute;" onmousedown="Drag.start(this)">第一个</div>
<div style="width:100px;height:100px;background-color:#00FF00;position:absolute;" onmousedown="Drag.start(this)">第二个</div>
<div style="width:100px;height:100px;background-color:#0000FF;position:absolute;" onmousedown="Drag.start(this)">第三个</div>
<input type="text" id="s1"/>
<input type="text" id="s2"/>
<input type="button" onclick="javascript:document.getElementById('s1').value=Drag.X" />
<center>字有好多</center>
<!--
frame在FF里会导致丢失捕获的BUG
用alpha:0的XX盖住就可以了
这个就不测试了^^
<iframe style="background-color:#CCCC99; width:700px; height:500px;"></iframe>
-->
</body>
</html>
下有那个bug 原因是 你 可能触发了
window.getSelection && window.getSelection().removeAllRanges();把选择的清楚了
在移动事件中加ie 下这个 bug
要用鼠标的 获得事件将其锁定不能选中其他的
比如
obj 是你要的对象
if(obj.setCapture)
{
//就把改事件的 onlosecapture 删除了,删除中obj.releaseCapture() ,然后重新捕获鼠标事件
}
推荐楼主 用封装的写法便于修改
贴下 我师傅教我写的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Drag</title>
<script type="text/javascript">
//var rePos = function () {
// return !window.opera && document.documentElement.getBoundingClientRect && function (o) {
// var pos = o.getBoundingClientRect()
// , root = o.ownerDocument
// , x = pos.left + root.documentElement.scrollLeft - 2
// , y = pos.top + root.documentElement.scrollTop - 2;
//
// try {
// var f = root.parentWindow || null;
// if (f) {
// var offset = 2 - (f.frameBorder || 1) * 2;
// x += offset, y += offset;
// }
// } catch (exp) {}
// return { x : x, y : y };
// } || function (o) {
// var x = 0, y = 0;
// do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
// return { 'x' : x, 'y' : y };
// };
//}();
var rePos = function () {
return document.documentElement.getBoundingClientRect && function (o) {//返回一个矩形区域
var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document;
return { x : pos.left + root.documentElement.scrollLeft, y : pos.top + root.documentElement.scrollTop };
} || function (o) {
var x = 0, y = 0;
do { x += o.offsetLeft, y += o.offsetTop; } while (o = o.offsetParent);
return { 'x' : x, 'y' : y };
};
}();var Drag = { X : 0, Y : 0, MF : null, EF : null, BF : null
, AE : function (element, type, listener) {
//添加
var wc = this, listeners = function () { listener.apply(wc, arguments); };
if (element.addEventListener) element.addEventListener(new String(type).substr(2), listeners, false);
else if (element.attachEvent) element.attachEvent(type, listeners);
return listeners;
}
, DE : function (element, type, listener) {
//删除
if (element.addEventListener) element.removeEventListener(new String(type).substr(2), listener, false);
else if (element.attachEvent) element.detachEvent(type, listener);
}
, start : function (moveObj) {
//开始
if (this.MO) return;
var pos = rePos(this.MO = moveObj), e = window.event || arguments.callee.caller.arguments[0];
this.X = document.documentElement.scrollLeft + e.clientX - pos.x;
this.Y = document.documentElement.scrollTop + e.clientY - pos.y;
if (moveObj.setCapture) {
this.BF = this.AE(moveObj, 'onlosecapture', this.end);
moveObj.setCapture();
} else {
this.BF = this.AE(window, 'onblur', this.end);
}
this.MF = this.AE(document, 'onmousemove', this.move);
this.EF = this.AE(document, 'onmouseup', this.end);
}
, move : function (e) {
//移动中
var e = window.event || e;
window.getSelection && window.getSelection().removeAllRanges();
with (this.MO.style) {
left = document.documentElement.scrollLeft + e.clientX - this.X + 'px';
top = document.documentElement.scrollTop + e.clientY - this.Y + 'px';
}
//IEscroll问题无视^^
}
, end : function () {
//结束
if (this.MO.setCapture) {
this.DE(this.MO, 'onlosecapture', this.BF);
this.MO.releaseCapture();
} else {
this.DE(window, 'onblur', this.BF);
}
this.DE(document, 'onmousemove', this.MF);
this.DE(document, 'onmouseup', this.EF);
this.MO = this.BF = this.MF = this.EF = null;
}
};
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:#FF0000;position:absolute;" onmousedown="Drag.start(this)">第一个</div>
<div style="width:100px;height:100px;background-color:#00FF00;position:absolute;" onmousedown="Drag.start(this)">第二个</div>
<div style="width:100px;height:100px;background-color:#0000FF;position:absolute;" onmousedown="Drag.start(this)">第三个</div>
<input type="text" id="s1"/>
<input type="text" id="s2"/>
<input type="button" onclick="javascript:document.getElementById('s1').value=Drag.X" />
<center>字有好多</center>
<!--
frame在FF里会导致丢失捕获的BUG
用alpha:0的XX盖住就可以了
这个就不测试了^^
<iframe style="background-color:#CCCC99; width:700px; height:500px;"></iframe>
-->
</body>
</html>
阻止了
请问 dom2下你的 target 如果获得监听
原来是要用ondragstart不是onselectstart
但不知道ff下应该用什么
this.BF = this.AE(moveObj, 'onlosecapture', this.end);
moveObj.setCapture();
} else {
this.BF = this.AE(window, 'onblur', this.end); //添加失去焦点的事件,处理 函数this.end就是
其实 ff下貌似不用那个事件 因为d
}
怎么不是