Chrome中对div元素进行动画处理（jQuery或CSS转换）时，Mouseleave事件意外触发或触发

Question

我有一个下拉菜单，里面有高度动画内容。有时，在任何随机动画周期中，即使在Google Chrome浏览器（v69，Windows 10）中，鼠标左键均匀触发。

查看小提琴：JSFiddle

$('#menu li').hover(
	function(event) {
  	$(this).find('.box').show();
  },
  function(event) {
		// current workaround
		if(event.target === $(this).find('.more-link')[0]){
    	console.log('Doing a return here would be a workaround but not the bugfix.');
      // return;
    }
  	$(this).find('.box').hide();
  }
);

$('.more-link')
	.unbind('click.more')
	.bind('click.more', function() {
    $moreLink = $(this);
  	$more = $moreLink.parent().find('.more');

    if ($more.is(':visible')) {
    	$moreLink.text('more...');
      $more.hide('blind', {}, 250);
    } else {
    	$moreLink.text('less...');
  		$more.show('blind', {}, 250);
    }
  });

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial;
  font-size: 10pt;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 20px;
}

ul {
  list-style-type: none;
  display: inline-block;
}

li {
  background-color: #efefef;
  border-right: 1px solid #cccccc;
  float: left;
  padding: 10px;
}

li:last-child {
  border-right: 0;
}

li:hover {
  background-color: tomato;
}

div.box {
  background-color: orange;
  border: 2px solid tomato;
  display: none;
  position: absolute;
  top: 76px;
  left: 40px;
  width: 300px;
  height: 200px;
  padding: 5px;
}

div.content {
  padding: 5px;
}

div.more {
  display: none;
  height: 100px;
  padding: 5px;
  background-color: yellow;
}

a.more-link {
  display: block;
  float: right;
  cursor: pointer;
  user-select:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<ul id="menu">
  <li>
    <a>Link 1</a>
    <div class="box">
      <a class="more-link">more...</a>
      <div class="content">Content 1</div>
      <div class="more">More content 1.</div>
    </div>
  </li>
  <li>
    <a>Link 2</a>
    <div class="box">
      <a class="more-link">more...</a>
      <div class="content">Content 2</div>
      <div class="more">More content 2.</div>
  </li>
  <li>
    <a>Link 3</a>
    <div class="box">
      <a class="more-link">more...</a>
      <div class="content">Content 3</div>
      <div class="more">More content 3.</div>
  </li>
</ul>

重现该问题的步骤：

1. 将鼠标悬停在任何li元素上
2. 点击“更多...”或“更少...”
3. 快速连续重复步骤2
4. 随机点击后，mouseleave事件触发，该框消失

以下是我到目前为止发现的内容：

• 动画越快，出现问题的机会越少
• 该问题同时出现在jQuery动画方法和CSS过渡方法中
• 没有动画，就不会发生
• CSS translation3d和背面可见性修复不适用于我

谢谢。