我有一个在两个浏览器窗口(两个屏幕)上运行两个的应用程序,而node webkit可以帮助我管理它们两个并让它们共享内存。
在应用程序中,我能够将元素从一个屏幕拖动到另一个屏幕(在浏览器之间)。起初,我的想法是监听 pointerdown 事件,当它触发回调以开始监听两个文档的 pointermove 和 pointerup 视窗。那是当我意识到启动 pointerdown 时chrome有一些有趣的行为。
从看来在 pointerdown 之后,所有其他事件仅在当前浏览器中发生,即使指针离开其边界。例如,当指针从左侧出现在屏幕上时, pointermove 事件将具有负的clientX值,或者从右侧离开屏幕时,它会比屏幕宽度高很多。
我还使用常规的chrome标签和
测试了其他一些事件monitorEvents(document, EVENT_NAME)
和结果相同-在两个浏览器上都没有执行向下指针操作时,捕获了指针移动,指针向上和指针进入事件,但是在其中一个窗口上执行了指针向下事件时,它停止获取另一个窗口上所有被提及的事件直到出现指针升级。
我什至试图通过做类似的事情来欺骗chrome
let pointerDownCallback= (event) => {
curerntScreenDocument.dispatchEvent(new Event('pointerup'));
firstScreenDocument.on('pointerup', pointerUpcallback);
secondScreenDocument.on('pointerup', pointerUpcallback);
firstScreenDocument.on('pointermove', pointerMoveCallback);
secondScreenDocument.on('pointermove', pointerMoveCallback);
}
element.on('pointerdown', pointerDownCallback);
chrome获得了 pointerup 事件,但并没有阻止 pointerdown 行为。
我仍然找到了一种禁用这种行为的方法,我尝试了很多方法-玩弄模糊,聚焦和类似的东西。
现在,我正在做的是修改在一个屏幕上触发的事件以匹配另一屏幕的位置,并触发在正确的屏幕上执行指标向上回调操作的服务。
let pointerUpcallback = (event) => {
// im getting the screen by using clienX and clientY of the event and by knowing the sizes of each screen;
let screen = getEventScreen(event)
if(screen !== pointerDownOriginScreen) {
// modify the event's positionb to match the correct screen
event.screenX = ....
event.screenY = ....
}
// get the service that will handle the pointerUp in the correct screen
let service = getServiceForScreen(screen)
service.handlePointerUp(screen);
}
对于指针移动,我也有类似的事情,同样,我的大多数其他动作都基于我在事件上获得的位置以及我知道事件应该在其中发生的正确屏幕。
处理这个问题很麻烦。所以我的问题是-有没有一种方法可以更优雅自然地处理此问题?
我试图实现的目标是使一个元素可以拖到不同的位置,包括另一个chrome窗口(这当然是我的应用程序的一部分)。为此,我在系统中实现了自定义拖动行为。拖动的想法是使开始拖动的元素最小化,并用较小的元素代替它的标题(类似于常规chrome标签的标题,但看不到标签的内容)。标题应该跟随鼠标光标(即使在即时消息切换屏幕时),并且在即时消息释放拖动时,元素也应最大化到其原始大小和内容。
我向元素添加了 pointerdown 事件处理程序,以将其最小化,保存其内容并在文档上添加 move 和 up 事件监听器两个镀铬窗口。
这个想法是,即使移动到另一个屏幕,标题也将通过 pointermove 跟随光标,因为现在触发事件的那个对象是另一个chrome窗口的文档。 pointerup 事件的想法相同,因此,拖动结束时,我将知道它在哪个屏幕上发生,因为他将触发 pointerup 事件。
但这不是事实,因为在窗口上启动 pointerdown 事件后,chrome不允许事件在另一个窗口中触发。以下所有事件仅会触发 pointerdown 事件的起源窗口。
您可以通过打开2个chrome窗口并在devtolls控制台中在两个窗口中进行编写来模拟这种行为。
monitorEvents(documents, 'pointermove')
现在,当您将光标从一个窗口移动到另一个窗口时,每个窗口的控制台中都会触发 pointermove 事件。但是,当您单击一个窗口并按住指针并将其移动到统计位置(也在另一窗口上方)时,您会注意到 pointermove 事件仅对 pointerdown触发事件来源窗口。其他事件也是如此。