Javascript 在Firefox中捕获鼠标
在IE中存在。setCapture()。releaseCapture()函数。Javascript 在Firefox中捕获鼠标,javascript,html,Javascript,Html,在IE中存在。setCapture()。releaseCapture()函数。 在不使用jQuery的情况下,Firefox中这些函数的等价物是什么?(我的客户端不想使用它)FF/JavaScript中没有这样的函数。捕获函数只存在于JScript中。正如您所发现的,SetCapture和ReleaseCapture是IE特有的函数。在Firefox中,没有一种本地方式可以以相同的方式操作内容菜单 这似乎是有可能的Gimme可以找到在。这里有一篇博文:描述了使用此函数替换函数的一个场景。setC
在不使用jQuery的情况下,Firefox中这些函数的等价物是什么?(我的客户端不想使用它)FF/JavaScript中没有这样的函数。捕获函数只存在于JScript中。正如您所发现的,SetCapture和ReleaseCapture是IE特有的函数。在Firefox中,没有一种本地方式可以以相同的方式操作内容菜单
这似乎是有可能的Gimme可以找到在。这里有一篇博文:描述了使用此函数替换函数的一个场景。setCapture()和releaseCapture()是Internet Explorer特有的非标准方法。Firefox中没有实现。有一个称为Gimme的框架,它为您提供了一些鼠标捕获功能 使用事件冒泡:将冒泡鼠标事件的事件侦听器添加到高级容器(甚至可能是
文档
)中,并使用变量跟踪哪个元素应该是捕获元素
如果没有关于您要做什么的进一步信息,就没有什么可说的了。如上所述,Firefox不提供此功能,您可以通过监视整个文档上的事件来解决此问题。为了确保没有更好的方法,我刚刚检查了jQueryUI,它们似乎使用了相同的方法。例如,如果您想在jQuery中鼠标按下时捕捉鼠标移动,您可以执行以下操作:
$("#someElement").
mousedown(function() { $(document).mousemove(captureMouseMove) }).
mouseup(function() { $(document).unbind("mousemove", captureMouseMove) });
function captureMouseMove(event)
{
// ...
}
随时捕捉鼠标是不好的行为,我认为这就是为什么没有提供
setCapture
但是,要捕获鼠标进行拖放,只需处理文档
对象的鼠标事件(鼠标{up,down,move}),即使在客户端区域之外拖动也可能会触发该事件
<html>
<head>
<title>Capture test</title>
</head>
<body>
<script type="text/javascript">
document.onmousedown = function () {
state.innerHTML = "Dragging started";
};
document.onmousemove = function (e) {
coord.innerHTML = e.clientX + ',' + e.clientY;
}
document.onmouseup = function (e) {
state.innerHTML = "Dragging stopped";
}
</script>
<p id="state">.</p>
<p id="coord">.</p>
</body>
</html>
捕获测试
document.onmousedown=函数(){
state.innerHTML=“已开始拖动”;
};
document.onmousemove=函数(e){
coord.innerHTML=e.clientX+','+e.clientY;
}
document.onmouseup=函数(e){
state.innerHTML=“已停止拖动”;
}
我相信从FF4开始,element.setCapture()和document.releaseCapture()被添加到Firefox中:
“在处理mousedown事件期间调用element.setCapture()方法,将所有鼠标事件重新定位到此元素,直到释放鼠标按钮或调用document.releaseCapture()。”
2011年3月22日,setCapture和releaseCapture被添加到Firefox4中(随着Gecko 2的发布)。然而,WebKit(Chrome/Safari)仍然缺少这些功能。@JanZich的解决方案效果很好,只是如果鼠标在元素外部,它不会捕获鼠标向上移动事件。这对我来说更有效:
$("#someElement").mousedown(function() {
$(document).mousemove(captureMouseMove);
$(document).mouseup(captureMouseUp);
});
function captureMouseMove(event) {
console.log("mouse move");
}
function captureMouseUp(event) {
console.log("mouse up");
$(document).unbind("mousemove", captureMouseMove);
$(document).unbind("mouseup", captureMouseUp);
}
使用
true
作为要捕获的addEventListener
方法的第三个参数。例如:
document.addEventListener("click", function(event){location.hash=event.target}, true)
使用具有相同参数的removeEventListener来释放:
document.removeEventListener("click", function(event){location.hash=event.target}, true);
参考资料