javascript - 如何在 onmouseleave 和点击鼠标左键时触发一些功能？

Question

我有如下代码:

现在我想添加功能，不仅在我离开框/方 block 时增加计数器，而且还可以在框/方 block 外单击鼠标左键。因此，仅当鼠标离开框/正方形并在框/正方形外部单击时，计数器才会增加。

var counter = 0;

function myLeaveFunction() {
  document.getElementById("demo").innerHTML = counter += 1;
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  float: left;
  padding: 30px;
  text-align: center;
  background-color: lightgray;
}

<div onmouseleave="myLeaveFunction()">
  <p>onmouseleave: <br> <span id="demo">Mouse over and leave me AND CLICK OUTSIDE THE BOX!</span></p>
</div>

Answer 1

添加一个 bool 值来检查鼠标是否离开了 div 并将点击处理程序绑定(bind)到文档:

var counter = 0;
var mouseLeft = false;
function myLeaveFunction() {
    document.getElementById("demo").innerHTML = counter+=1;
    mouseLeft = true;
}

function clickBody() {
    if (mouseLeft == true)
        document.getElementById("demo").innerHTML = counter+=1;

    mouseLeft = false;
}
document.onclick = clickBody;