自定义鼠标光标+ IE问题
Custom mouse cursor + IE woes
我正在做一个具有以下属性的项目:
- jQuery驱动页面
- Unity 3d播放器嵌入到使用jQuery和
unityobject.js
(每指令从Unity)的页面 - Unity有自定义鼠标光标当用户的光标在Unity的画布区域内
问题: Unity捕获鼠标光标,但当包含它的网页变为非活动时不会释放它。这意味着如果用户切换到不同的选项卡(或打开一个新窗口),当用户将鼠标移到Unity本来所在的区域时,鼠标光标就会消失。这是unity 3d论坛中描述的一个unity bug:http://forum.unity3d.com/threads/4565-Unity-Web-player-issue-mouse-hidden-for-all-new-windows
不,它仍然没有修复在最新版本的Unity web客户端。
为了缓解这个问题,我们决定让Unity通过Javascript监听当前浏览器窗口状态,并根据它接收到的状态捕获/释放自定义鼠标光标。但还有其他问题:
Unity如何接收窗口状态:
// GetUnity returns the Unity object in the DOM<br>
NAMESPACE.windowStatus = function( statusStr ) {
GetUnity().SendMessage( "_AppShell", "OnRecieveWindowStatusFromWebPage", statusStr );
}
我试过以下方法…
方法1:将事件绑定到window对象
$( window ).live( 'focus', function() {
NAMESPACE.windowStatus( 'active' );
} );
$( window ).live( 'blur', function() {
NAMESPACE.windowStatus( 'inactive' );
} );
问题:在IE7和IE8中,新的浏览器选项卡不被认为是不同的"窗口",所以代码对Unity没有影响。它只在打开一个真正独立的浏览器窗口时才能工作。
方法2:将事件绑定到document对象$( document ).live(...);
问题: $( document )
在jQuery中实际上什么都不做。我发现了艰难的路。
来源:http://forum.jquery.com/topic/should-document-live-map-to-document-bind-window-too
方法3:将事件绑定到<body>
对象$( 'body' ).live(...);
问题:不知怎的IE不能识别Unity对象是DOM的一部分(尽管使用了.live()
方法)。所以每次用户点击嵌入式Unity播放器时,浏览器都会向Unity发送一个blur
事件,并且鼠标光标被锁定(当点击Unity时,console.log()
会打印出inactive
)。在某些情况下,它甚至不会释放鼠标光标,导致整个浏览器对鼠标事件没有响应;释放光标的唯一方法是在浏览器窗口外单击,然后再次单击浏览器)。
我尝试过的其他事情:
window.addEventListener( 'focus', function() {...} );
document.addEventListener( 'focus', function() {...} );
document.body.addEventListener( 'focus', function() {...} );
document.getElementsByTagName('body')[0].addEventListener( 'focus', function() {...} );
问题: .addEventListener()
方法在IE中根本不支持这些元素!额!
奖金:
更有观察力的人可能会说:"嘿,为什么不检测Unity对象本身的鼠标点击事件,而忽略blur
、.live()
或.bind()
事件呢?"试过。IE也不喜欢。它完全忽略事件,并指出这些事件对对象不可用。
我的Javascript大师们。我不知道如何以一种优雅的方式最好地解决这个问题。
问题解决。Unity3d的论坛提供了一个解决方案…http://forum.unity3d.com/threads/27516-Mouse-input-possible-from-different-tab
它的要点是:框架并不总是答案。
我忘了.addEventListener()
不是IE原生的,.attachEvent()
是。因此,如果我只是在检测到IE时将所有事件侦听器替换为特定于IE的侦听器,那么上面的代码就可以工作了。
修改后的代码如下:
if ( navigator.appName == 'Microsoft Internet Explorer' ) {
GetUnity().attachEvent( 'onmouseover', onFocus, false );
GetUnity().attachEvent( 'onfocusin', onFocus, false );
GetUnity().attachEvent( 'onmouseout', onBlur, false );
} else {
// Netscape, Firefox, Mozilla, Chrome and Safari.
GetUnity().addEventListener( 'mouseover', onFocus, false );
GetUnity().addEventListener( 'focus', onFocus, false );
GetUnity().addEventListener( 'mouseout', onBlur, false );
}
function onFocus() {
NAMESPACE.WindowStatus( 'active' );
}
function onBlur() {
NAMESPACE.WindowStatus( 'inactive' );
}
要真正做到这一点,您必须在unityobject.embedUnity()
方法的回调函数中创建事件附件。如果你试图在Unity加载之前附加事件,浏览器会抱怨GetUnity()
是null
或undefined
。
希望这篇文章能帮助那些有同样问题的人。
- 弯曲拐角IE 7,8问题
- jQuery AJAX 上传系统 IE 问题
- 从父页面调用iframe中的javascript,IE问题
- IE 8问题(使用js)
- Nic编辑新的上传IE问题
- 自定义模式脚本 - Safari 和 IE 问题
- JavaScript for .在循环 IE 问题中
- 使用 YQL 使用 jQuery 解析 XML(IE 问题)
- 输入类型提交的 IE 问题
- 液体布局IE问题,当然(新手)
- 在菜单上滚动交换类 - IE 问题
- jQuery预加载程序ie-6/7问题
- 重新初始化内联编辑器时的IE问题
- jQuery ie问题与粘贴(内容与中断)
- javascript IE问题.仅在IE中不工作
- selenium webdriver中的IE问题
- IE 7/8问题-无法获取属性'id': object的值为空或未定义
- 通过javascript从xml文件更新对象(IE问题)
- javascript背景大小和IE问题
- IE问题:可见