iOS 仅在背景元素的 CSS 设置为 cursor:pointer 时检测 mouseleave答案

【问题标题】：iOS only detects mouseleave when background element's CSS is set to cursor: pointeriOS 仅在背景元素的 CSS 设置为 cursor:pointer 时检测 mouseleave
【发布时间】：2019-12-08 11:05:25
【问题描述】：

我有一个使用 2 个事件侦听器的工具提示：mouseenter（打开它）和 mouseleave（关闭它）。

在桌面浏览器和 iPhone iOS 13.2 中它可以正常工作，但在 iPhone iOS 12.2 中它没有关闭。

我找到了一个解决方案，在背景元素上设置 CSS cursor: pointer;。因此，iOS 似乎需要一些帮助来检测mouseleave 事件。

还有其他解决方案吗？设置cursor: pointer; 感觉很笨拙，在某些情况下可能会令人困惑。

更新：我添加了以下代码以简化我的测试，并且正如我预期的那样，当我点击 iOS13 而不是 iOS12 的屏幕时会记录“测试”。但是，当我将该代码（仅此而已）放入 codepen.io 并以这种方式查看时，两个版本都可以正常工作。

function doTest() {
  console.log('testing');
}

document.addEventListener('click', doTest);

【问题讨论】：

标签： javascript ios

【解决方案1】：

显然，没有cursor: pointer;，iOS 上的任何非锚元素都无法接收“鼠标”事件，请参阅：https://stackoverflow.com/a/27938334/529024。

所以我建议尝试将元素更改为锚点<a> 或使用触摸事件：touchstart 和touchend。见：https://stackoverflow.com/a/20882736/529024

【讨论】：

【解决方案2】：

touchend 事件只能在移动设备上运行。在文档中添加 touchend 以在点击正文时隐藏工具提示，但在点击要显示工具提示的元素时阻止这种情况发生 - 并改为显示工具提示 ontouchend。我做了一个简单的例子给你澄清。它只是用一个 ID 为“tooltip”的工具提示来演示这个概念：

document.addEventListener("touchend", function(){
  hideTooltip();
});

function showTooltip(){
  document.getElementById("tooltip").style.display = "block";
}

function hideTooltip(){
  document.getElementById("tooltip").style.display = "none";
}

body>div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
}
		
#tooltip{
  position:absolute;
  top:100%;
  left:0px;
  width:100%;
  background:#222;
  color:#fff;
  padding:5px;
  box-sizing:border-box;
  display:none;
}

<html>
	<body>
		<div onmouseenter="showTooltip();" onmouseleave="hideTooltip();" ontouchend="event.preventDefault();showTooltip();">
			Tap me!
			<div id="tooltip">tooltip info...</div>
		</div>
	</body>
</html>

【讨论】：