个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
在 Internet Explorer 7 中，body onmousemove 或 document.onmousemove 事件似乎仅在鼠标位于浏览器窗口内时触发，而不是在鼠标位于浏览器窗口外时触发。然而，在 Firefox 中，当我移出浏览器窗口时，onmousemove 事件会被正确调用。
如何设置在 IE 浏览器窗口外部调用的事件？
Google Maps在 IE 中执行此操作。如果按住鼠标按钮并将鼠标移到浏览器窗口之外，您可以看到 map 仍在移动。
最佳答案
(注意:此答案专门指 mousedown -> mousemove -> mouseup 的“标准”拖动实现。它不适用于 HTML5 drag specification )。
允许在浏览器窗口之外拖动是一个老问题，不同的浏览器通过两种方式解决了这个问题。
除了 IE 之外，当用户通过 mousedown 发起拖动操作时，浏览器做了一些巧妙的事情(这一切都只是来自观察):一种状态机启动来处理特殊的情况鼠标移动到窗口外的情况:
文档内触发mousedown事件mousemove事件。即使从文档外部(即窗口)触发，事件也会触发 mouseup 事件(在文档内部或外部)。从文档外部触发的 mousemove 事件不再触发IE 和旧版本的 Firefox [最新版本 2.0.20] 不会表现出此行为。拖动到窗口之外是行不通的1。
IE和FF2的问题实际上在于元素是否“可选择”(参见 here 和 here )。如果拖动实现不执行任何操作(从而允许通过鼠标进行选择)，则所述实现不必考虑窗口外的移动；浏览器将继续并正确触发mousemove，并且允许用户在窗口外自由拖动。不错。
但是，通过让浏览器决定在 mousemove 上执行什么操作，您会得到这样的效果:浏览器认为用户正在尝试“选择”某些内容(例如元素)，而不是移动它，并继续疯狂地尝试突出显示当鼠标在拖动过程中移入或移出元素时，元素或其中的文本。
我见过的大多数拖动实现都会采取一些技巧来使被拖动的元素“不可选择”，从而完全控制 mousemove 来模拟拖动:
elementToDrag.unselectable = "on";
elementToDrag.onselectstart = function(){return false};
elementToDrag.style.userSelect = "none"; // w3c standard
elementToDrag.style.MozUserSelect = "none"; // Firefox
这很好用，但是会破坏窗口外的拖动。 2
无论如何，要回答您的问题，要让 IE(所有版本)允许在窗口外拖动，请使用 setCapture (当释放鼠标时，反之 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>
<title>Simple drag demo</title>
<style>
#dragme {
position:absolute;
cursor:move;
background:#eee;
border:1px solid #333;
padding:10px;
}
</style>
<script>
function makeDraggable(element) {
/* Simple drag implementation */
element.onmousedown = function(event) {
document.onmousemove = function(event) {
event = event || window.event;
element.style.left = event.clientX + 'px';
element.style.top = event.clientY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
if(element.releaseCapture) { element.releaseCapture(); }
};
if(element.setCapture) { element.setCapture(); }
};
/* These 3 lines are helpful for the browser to not accidentally
* think the user is trying to "text select" the draggable object
* when drag initiation happens on text nodes.
* Unfortunately they also break draggability outside the window.
*/
element.unselectable = "on";
element.onselectstart = function(){return false};
element.style.userSelect = element.style.MozUserSelect = "none";
}
</script>
</head>
<body onload="makeDraggable(document.getElementById('dragme'))">
<div id="dragme">Drag me (outside window)</div>
</body>
</html>
这正是 Google map 所做的事情(正如我在 2004 年首次发布 Google map 时对它进行逆向工程时发现的那样)。
<小时/>1我相信它实际上只有在文本节点上启动拖动操作(即mousedown)时才会中断。元素/容器节点不表现出相同的行为，并且可以在文档内部或外部拖动，前提是用户将鼠标放在元素的“空”部分上
2同样，用于文本节点上的拖动启动。
关于javascript - 响应IE浏览器窗口外的onmousemove事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1685326/
28
4
0
我试图弄清楚如何为聊天气泡制作外 Angular 圆形设计，以获得所需的结果: 我必须使用气泡作为不同背景的组件，没有相同和纯色，但有一些设计元素，所以气泡周围的空间必须是透明的: 我试过将元素添加为
我尝试了 display:table-cell 但它没有用。我怎样才能在div中显示这个词。现在它显示溢出了 div。我在我的网页上使用 CSS2。提前致谢。 Visit W3Schools
我有一个使用 CSS 隐藏在 View (对于移动设备)之外的菜单: #filter-column { position:absolute; left:-400px; } 当用户单击链
我想创建一个这样的问题行 http://imageshack.us/photo/my-images/200/questionh.png/ 此时我的html源是: question label
我要mock a class with Ruby . 如何编写处理样板代码的方法？ 以下代码: module Mailgun end module Acani def self.mock_mail
请不要担心循环，但我的问题是关于这些关键字:outer、middle 和 inner。它们不是声明为实例变量，为什么IDE让代码编译？我在谷歌上搜索了一下，这是java标签吗？ Java中的某种关键字
我有一个数据框(df)，看起来像， Id Name Activity. 1 ABC a;sldkj kkkdk 2 two
Elasticsearch内存中有哪些东西可以使搜索如此快速？ 是所有json本身都在内存中，还是仅倒排索引和映射将在内存中24 * 7？ 最佳答案 这是一个很好的问题，然后简而言之就是: 不仅仅是数
我正在尝试添加用户在用户界面上选择的值。对于数据库中的特定列，我已经与数据库建立了连接，当我按“保存”时，新的 id 会添加到数据库中，控制台中不会显示任何错误，但我要提交的值不会放入数据库，我怎样才
我不确定这个问题是否应该涉及电子领域，但由于它是关于编程的，所以我在这里问了它。 我正在制作一个数字时钟，使用由移位寄存器供电的 LED，而不是 7 段显示器。无论如何，当使用 CCS 编译代码时，我
我希望用户在 div 中选择文本 (html)。然而，这样做会在浏览器中显示选择背景，也在 div 之外。 我可以用(参见 http://jsfiddle.net/lborgman/aWbgT/)来防
我有以下 Razor View @{ ViewBag.Title = "UserCost"; }
我使用 KineticJS 和 D3.js 制作了以下内容。当用户将鼠标悬停在其中一个点上时，我使用 KineticJS 让我弹出工具提示。但是，由于 Canvas 的边界，工具提示似乎被切断了。有没
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 2 年前。 Improve this qu
我正在使用 primefaces 学习 Java Web 和 jsf。 我的项目当前只有一个index.xhtml 文件，当我访问localhost:8080/appname/时，index.xhtm
我是 ios 新手。 我有一个 View ，其中我使用 Quarts 核心绘制了一个圆圈。 我在该圆圈中放置了一个 UIButton，并赋予了拖放该按钮的功能。 现在我想要限制按钮不能被拖出那个圆圈区
这个问题已经有答案了: How to add two strings as if they were numbers? [duplicate] (20 个回答) How to force JS to
我正在创建简单的文本从右侧滑动到页面的 css 动画。我正在使用 jQuery 通过向元素添加一个类来触发动画。但是起始位置必须在视口(viewport)之外，这会触发底部滚动条出现。如何预防？ 这是
我编写了一个简单的代码来评估一段代码并将输出写入文件。这样它减少了我的一些，因为我需要很多很多文件，每一行都包含返回值! 无论如何，我正在使用的代码是: #!/usr/bin/ruby -w def
所以我试图在我的一款游戏中加入一个非常基本的“手电筒”式的东西。 我让它工作的方式是在我的游戏屏幕顶部有一个层，这个层会绘制一个黑色矩形，不透明度约为 80%，在我的游戏场景顶部创建黑暗的外观。 cc
我是一名优秀的程序员,十分优秀！