如何在我的代码中正确使用 mouseleave 函数？答案

【问题标题】：How do I correctly use the mouseleave function in my code?如何在我的代码中正确使用 mouseleave 函数？
【发布时间】：2018-08-15 05:07:56
【问题描述】：

好的，所以我需要创建一个带有红色背景的 div，然后注册“Mouseleave”事件，然后该事件将调用一个函数，该函数将显示以下文本“MouseLeave 事件已触发”。我的目标是，当我将鼠标移到我的 div 上然后将其移开时，我会收到一条警报，上面写着“MouseLeave 事件已触发”。然后，当我再次单击我的 div 时，它将取消注册 MouseLeave 事件，这样当我将鼠标移到 div 上时，什么都不会发生。这是我到目前为止的代码：

function attachEvent(myObject) {

     // to do - get state of listener 
     myObject.addEventListener("onmouseleave", function attachEvent(){}, false);
     alert("Mouse");

     // to do - if previously called addEventListener, then I now want to call removeEventListener
     myObject.removeEventListener("onmouseleave", function attachEvent(){}, false);
      
     // to do - if previously called removeEventListener, then I now want to call addEventListener 
     myObject.addEventListener("onmouseleave", function attachEvent(){}, false);
}

div {background-color:red;padding:100px;max-width:25%;margin:auto}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>practice</title>
		<script src="scripts.js"></script>
	</head>
	<body>
		<script>
     		alert("Page loaded event fired");
		</script>
		<div id="cycle"; onclick="attachEvent(this)">
        <h2 style="text-align:center">Click to cycle event listener</h2>
		</div>
	</body>
</html>

当我将鼠标移出 div 时，应该会弹出警报，但事实并非如此。我究竟做错了什么？请暂时保留这样的代码，因为我还不熟悉 getelementbyid。

【问题讨论】：

您还必须使用 mouseenter 侦听器才能使 mouseleave 工作
我该怎么做呢？我需要它，所以当我单击 div 框时，它会激活侦听器，该侦听器现在将显示鼠标，当我将光标移出 div 时，我应该得到另一个警报，说 mouseleave 事件已触发。
@Akshaypadwal 记录在哪里？

标签： javascript

【解决方案1】：

事件的正确名称是mouseleave。当您通过 HTML 属性设置事件时使用onmouseleave（就像使用 onclick 一样）。

我建议你定义一个函数（onMouseLeave 在我下面的代码中）并将其用作addEventListener 和removeEventListener 的参数。

最后，您不需要将useCapture 参数设置为false（对于addEventListener 和removeEventListener），因为false 是默认值。

var eventAttached = false;

function attachEvent(myObject) {

    if(eventAttached === false){
      myObject.addEventListener("mouseleave", onMouseLeave);
    } else {
      myObject.removeEventListener("mouseleave", onMouseLeave);
    } 
    
    eventAttached = !eventAttached;
}

function onMouseLeave(){
  alert("Mouse leave");
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>practice</title>
		<script src="scripts.js"></script>
	</head>
	<body>
		<script>
     		alert("Page loaded event fired");
		</script>
		<div style="background-color:red;padding:100px"; id="cycle"; onclick="attachEvent(this)">
        <h2 style="text-align:center">Click to cycle event listener</h2>
		</div>
	</body>
</html>

【讨论】：

【解决方案2】：

您没有正确传递this，在您的情况下this 是一个全局上下文。
为了removeEventListener工作，回调函数不能是匿名函数。
保留一个标志来检查是否应该添加事件或删除事件。此标志将在每次点击时切换其值。
使用mouseleave 代替onmouseleave，当您附加的事件内联到元素时使用后一种。

var eventExists = false;

function mouseLeft() {
  console.log("Mouse left!");
}

function attachEvent() {
  if (!eventExists) {
    this.addEventListener("mouseleave", mouseLeft);
  } else {
    this.removeEventListener("mouseleave", mouseLeft);
  }
  eventExists = !eventExists;
}

<div style="background-color:red;padding:10px" ; id="cycle" ; onclick="attachEvent.call(this)">
  <h2 style="text-align:center">Click to cycle event listener</h2>
</div>

【讨论】：

这个解决方案正是 OP 想要的。这应该是公认的答案。为细节和sn-p投票。
非常感谢您，过去 9 个小时我一直在试图弄清楚这该死的事情。我真的很感激。
@ToriannaTifft 很高兴它有帮助:)

【解决方案3】：

EventTarget.addEventListener() 的第一个参数是要监听的type of the event。

没有onmouseenter 事件。 onmouseevent 是存储您安装的事件处理程序的属性的内部名称。活动名称为mouseenter。

您的代码应为：

myObject.addEventListener("mouseleave", function attachEvent(){}, false);

但是您使用此代码安装的事件处理程序不执行任何操作；您将无法知道何时调用它。为了进行测试，您应该在处理程序中添加对 console.log() 的调用：

myObject.addEventListener("mouseleave", function(){ console.log('Mouse is out of the house.'); }, false);

【讨论】：

【解决方案4】：

使用 jquery 更容易：

$(myObject).mouseleave(function(){alert('MouseLeave event fired')});

【讨论】：