javascript - 鼠标离开触发错误-6ren

javascript - 鼠标离开触发错误

转载作者：行者123 更新时间：2023-12-01 05:46:52

我被困了两个小时，试图找出为什么当我将鼠标悬停在侧边栏内的element上时，我可以在控制台中看到“鼠标离开”。问题是，只有当我从顶部输入鼠标时，我才能在控制台中看到日志。 Chrome 37.0.2062.120 m(64位)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
	<style type="text/css">
		* { margin:0; padding:0; }
		html,body{ height:100%; }
		#sidebar{ position: relative; width:200px; height:400px; background:green; overflow: hidden;}
		.elementToScroll { float:left; width:100%; }
	</style>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$('.element').on('mouseleave', function(){
				console.log("mouse leave");
			});
		});
	</script>
</head>
<body>
	<div id="sidebar">
		<div class="element">
			<p style="background-color:red;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:orange;">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
			</p>
			<p style="background-color:maroon;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:black;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
		</div>
	</div>
</body>
</html>

您应该将所有代码保存在 html 文件中或以全页模式查看代码段。

编辑如果您运行以下代码片段，您将进入控制台，仅一次从顶部进入绿色区域。

mouse enter 
mouse leave
mouse enter

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
	<style type="text/css">
		*{margin:0; padding:0;}
		#sidebar {width: 200px; height:400px; background:green; position:relative;}
		.element {width: 100%; height:100%;}
	</style>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.element').on('mouseleave', function(){
				console.log('mouse leave');
			});

			$('.element').on('mouseenter', function(){
				console.log('mouse enter');
			});
		});
	</script>
</head>
<body>
	<div id="sidebar">
		<div class="element">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam dolore adipisci minima deserunt, provident ex distinctio corporis quam ipsam harum ea omnis, officiis libero voluptatum nobis accusantium. Ducimus, sequi, deleniti.</p>
		</div>
	</div>
</body>
</html>

由于这种情况似乎只发生在 chrome 中，所以我在问题中添加了 google-chrome 标签。

显示问题的视频:https://drive.google.com/file/d/0B-eYll72UzMteFZWM1hjeFd1ZFk/edit?usp=sharing

最佳答案

您的代码工作正常，因此对于 native 版本来说也是如此。

var elmn = document.getElementsByClassName("element");

for (var i=0; i<elmn.length; i++){
  elmn[i].onmouseleave = function(){
    console.log("mouse leave")
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
	<style type="text/css">
		* { margin:0; padding:0; }
		html,body{ height:100%; }
		#sidebar{ position: relative; width:200px; height:400px; background:green; overflow: hidden;}
		.elementToScroll { float:left; width:100%; }
	</style>


</head>
<body>
	<div id="sidebar">
		<div class="element">
			<p style="background-color:red;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:yellow;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:orange;">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae.
			</p>
			<p style="background-color:maroon;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
			<p style="background-color:black;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugit dolores autem tempora harum veniam, eos, perferendis rerum quaerat ea, vitae incidunt rem eaque animi culpa deleniti dignissimos molestias quae. </p>
		</div>
	</div>
</body>
</html>

关于javascript - 鼠标离开触发错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25980443/

文章推荐： javascript - 如何在RequireJS中编写高级条件？

文章推荐： java - 设置作为另一个对象的子对象的对象的字段值

文章推荐： java - 安卓存储: OnSavedInstanceState not working?

文章推荐： java - 通过 XPath 将任意 XML 字符串插入 XML 文档的代码

Dartz - 离开 Either
var newRight; if(either.isRight()) { newRight = either.getOrElse(() => throw UnimplementedError())
ios - 离开/关闭按钮操作上的文本字段
我正在做一个登录字段。它由 UITextfields 和一个弹出选择器 Controller 的按钮组成。单击按钮以显示按钮弹出时，我想删除/保留/取消编辑文本字段。我试过: [发件人resignF
javascript - 离开/关闭标签前确认？
我试图在用户关闭选项卡或转到另一个选项卡(如 facebook、gmail、GoDaddy 和其他选项卡)之前显示确认弹窗。我的代码适用于 Firefox，但不适用于 chrome、safari 等
c# - 离开 While 循环？
我无法退出代码中的 While 循环和方法。用户可以选择输入 1 或 2 和 0 来取消(离开菜单和方法)。但是就像现在的代码一样，我猜 Switch 中的默认选项会阻止它离开 While 循环!？我
php - 需要帮助让表格从提交区域提交/离开
所以我目前正在学习这个关于 PHP 表单的教程，并且我把它放到了这个页面的底部，它说到目前为止要测试表单，http://www.webreference.com/programming/php/sea
iphone - 离开 XMPPRoom
我正在开发一个可以让用户登录 2 个 xmpprooms 的应用程序，但同时只能登录 2 个，所以如果他想连接到另一个，我必须断开他与前一个的连接并连接到下一个。使用此代码: 这是我离开房间的方式:
reactjs - 离开 React 组件时网络摄像头不会关闭
我目前正在 React 应用程序中使用我的网络摄像头拍照。然而，当我离开组件时，绿灯继续亮着，我似乎无法关闭我的网络摄像头。这是我用来使用网络摄像头的代码。 navigator.webkitGet
rfid - 使用有源RFID标签检测存在(到达/离开)
实际到达很简单，标签进入接收器天线范围，但是偏离是造成问题的原因。首先，我们了解一些有关设置的信息。标签: 它们以433Mhz的速度工作，每1.5秒钟发送一次“心跳”，移动时进入传输突发模式，这种
java - 离开 SettingsActivity 时应用强制关闭
这是我的第二个问题(已经回答):Creating SharedPreferences object inside Fragment . 在弄清楚如何在静态 Fragment 类中创建 SharedPr
firebase - 离开 Firebase 中的项目但不拥有该项目的所有权
我需要离开 Firebase 中的一个项目，但我没有选择离开该项目，因为我没有该项目的所有权。我是该项目的成员，需要离开该项目，因为该项目的开发已在几个月前停止有什么选择可以做到这一点吗？我还需要从
javascript - 离开 IE 选项卡会发生什么事件？
我希望在以下情况下触发我的 javascript: 当打开多个 IE 选项卡时，当前 IE 选项卡将被切换。当前 IE 选项卡关闭时。我不希望我的 JS 代码被页内弹出对话框触发。当整个 IE
socket.io 加入/离开
我在 socket.io wiki 上查看如何使用房间，但加入和离开不起作用，我想知道他们是否可能更改了一些内容但没有机会更新 wiki？ socket.join("room-"+data.meid)
java - 离开 Activity 时如何停止应用程序的振动？
在此 Activity 中我使用振动，因此由用户选择按照振动节奏移动的球，但是当我想向后返回屏幕时，即返回到MainActivity，应用程序继续振动而不停止。这是我的代码，我已经尝试了所有方法，但无
ios - 离开 View 时删除完成时的列表项
我正在构建一个用于学习 SwiftUI 的小型待办事项应用程序，我可以在 CoreData 中创建一个任务列表并将它们标记为完成，这会将 isComplete 设置为 true 并将图像从空圆圈更改为
asp.net - 离开 if 语句
我在 if 语句中有一个 if 语句。如果第二个if语句中的条件返回false，我要转到第一个else因为它会自动设置我的验证控件。希望你明白 if (page.isvalid() ) {
android - 离开 Activity 后保留变量
我正在尝试找到一种方法，让我的变量在应用程序的整个生命周期中保持不变。我设计该应用程序的方式是用户单击类(class)并提交成绩。我想要的是应用程序在 Activity 结束后存储成绩。当用户退出屏幕
ios - 边界功能不会阻止 Sprite 离开
首先你应该知道，允许玩家玩的区域是一个正方形，即320x320，位于屏幕中央。这个 320x320 的正方形是一个 5x5 的网格 [每个图 block 64x64]，并且玩家始终位于网格图 bloc
ios - 离开 UIViewController 时应用程序崩溃
我的应用程序在离开 UIViewController 时崩溃并出现以下错误。 [FeedSingleViewCell retain]: message sent to deallocated inst
ios - 离开 AVFullScreenViewController 后屏幕不会旋转回纵向
使用此代码允许媒体播放器在全屏时横向旋转(应用程序不支持): // handle orientation for the device func application (_ application:
ios - 手机进入飞行模式时计时器停止，离开 AM 后不会重新启动
好的。查看了可能的答案，但我在这里没有看到我的问题。我有一个相当标准的 GCD 重复计时器: class RepeatingGCDTimer { /// This holds our cur

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 鼠标离开触发错误