javascript - 自定义鼠标光标 + IN word-6ren

javascript - 自定义鼠标光标 + IN word

转载作者：行者123 更新时间：2023-11-30 06:05:01

我正在从事一个具有这些属性的项目:

jQuery 驱动页面
使用 jQuery 和 unityobject.js(根据 Unity 的指令)嵌入到页面的 Unity 3d 播放器
当用户的光标位于 Unity 的 Canvas 区域内时，Unity 具有自定义鼠标光标

问题:Unity 捕获鼠标光标但不会在包含鼠标光标的网页变为非事件状态时释放鼠标光标。这意味着如果用户切换到不同的选项卡(或打开一个新窗口)，当用户将鼠标悬停在 Unity 原本所在的区域时，鼠标光标会消失。这是 Unity 3d 论坛中描述的一个统一错误: 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 );
}

我试过以下方法...

方法一:给“window”对象绑定(bind)事件

$( window ).live( 'focus', function() {
    NAMESPACE.windowStatus( 'active' );
} );

$( window ).live( 'blur', function() {
    NAMESPACE.windowStatus( 'inactive' );
} );

问题:在 IE7 和 IE8 中，新的浏览器选项卡不被视为不同的“窗口”，因此代码对 Unity 没有影响。它仅在打开真正的独立浏览器窗口时有效。

方法二:给“文档”对象绑定(bind)事件
像这样:$( document ).live(...);

问题: jQuery 中的 $( document ) 实际上什么都不做。很难找到。
来源:http://forum.jquery.com/topic/should-document-live-map-to-document-bind-window-too

方法三:给<body>对象绑定(bind)事件
像这样:$( '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() {...} );

问题: IE 在这些元素上根本不支持 .addEventListener() 方法! GAH!

奖励:
细心的人可能会说，“嘿，为什么不检测 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' );
}