检测 TideSDK 应用程序上的窗口鼠标离开答案

【问题标题】：Detect window mouse leave on TideSDK apps检测 TideSDK 应用程序上的窗口鼠标离开
【发布时间】：2013-05-23 07:27:51
【问题描述】：

我正在使用 TideSDK 开发我的第一个应用程序。我有一些类似工具栏的按钮，我希望它们在鼠标离开窗口时淡出。

不幸的是，TideSDK 似乎没有在 window 对象上触发 mouseout 或 mouseleave 事件，我无法检测它使用 mousemove，因为显然 mousemove 事件不会在以下时间触发光标不在主应用程序窗口中。

我在 TideSDK 官方文档中没有找到Ti.UI.UserWindow 的鼠标相关事件。

有人有想法吗？
谢谢。

【问题讨论】：

标签： tidesdk

【解决方案1】：

我在 TideSDK 中遇到了同样的问题。在 Chrome 或 Firefox 上 window.onmouseleave 可以正常工作，但不能在 TideSDK（愚蠢的旧 Webkit）上 :( 但是... 你可以在#wrapper里面使用CSS和:hover :)你可以在每一边移动#wrapper 1px（按位置：例如固定），然后你写了这样的东西：

#wrapper:hover #myelement{
// some CSS
}

【讨论】：

第二种解决方案（稍微移动的包装器）不起作用（请参阅我对 Jason 回答的评论）。令人难以置信的是 CSS :hover 也不起作用！我尝试在正文中放置一个full-sized full-red div，并使用:hover 使其full-green：应用程序启动和我的@ 987654326@ 是红色的，我将鼠标移到它上面变成绿色，然后将鼠标移出没有任何反应...
我确信这是一个错误。我举报了所有as issue on GitHub。我不知道 SO 会不会自动给你分配赏金。

【解决方案2】：

它会在其他对象上触发 mouseout 或 mouseleave 事件吗？您可以创建另一个与窗口大小相同的对象并将其放置在背景中。

【讨论】：

使用此方法，您可以检测 body 元素上的 mouseout 事件。唯一的问题是，在窗口菜单或窗口栏上移动鼠标时，鼠标仍然在窗口上，而不是在正文上。
它不起作用。问题不在于 window 对象本身。在应用程序窗口外未检测到所有鼠标移动：因此根本不会触发 mouseout/leave JS 事件。如果我放置一些<div> 来覆盖整个区域并将事件附加到它而不是window，则没有任何变化。
我确信这是一个错误。我举报了所有as issue on GitHub。

【解决方案3】：

可能的解决方法是使用计时器。每次计时器触发时，您都会检查鼠标的位置，如果它不在窗口范围内，请手动触发 mouseleave。

我在 TideSDK 方面经验不足，无法告诉您如何获取鼠标在屏幕上的位置，对此感到抱歉。

【讨论】：

搜索文档，我没有发现鼠标光标:(
对不起，我以为这是可能的，但事实并非如此。

【解决方案4】：

您不需要 TideSDK 来执行此操作，您只需使用 JavaScript 即可。

这是我在 jQuery 中所做的：

$(document).on("mouseenter", function() {
  return $("#side_bar_container").addClass("slide_in");
});

$(document).on("mouseleave", function() {
  $("#side_bar_container").removeClass("show_full_menu");
  $("#side_bar_container").removeClass("slide_in");
  return removeAllClasses("active", $(".show-archive"));
});

这适用于我当前的 TideSDK 应用和我正在测试的所有浏览器。

【讨论】：