在 mouseenter 之后立即触发 mouseleave

Question

mouseenter和mouseleave使用事件监听时，触发window.onblur后，每次mouseenter都会触发mouseleave。

对此有什么解决办法吗？

这里的例子

抱歉外部链接，但是 mouseenter/mouseleave 在 onblur 之后在代码片段中不起作用。

Answer 1

看看这个！ 来自https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

 var enterEventCount = 0; var leaveEventCount = 0; const mouseTarget = document.getElementById('mouseTarget'); const unorderedList = document.getElementById('unorderedList'); mouseTarget.addEventListener('mouseenter', e => { mouseTarget.style.border = '5px dotted orange'; enterEventCount++; addListItem('This is mouseenter event ' + enterEventCount + '.'); }); mouseTarget.addEventListener('mouseleave', e => { mouseTarget.style.border = '1px solid #333'; leaveEventCount++; addListItem('This is mouseleave event ' + leaveEventCount + '.'); }); function addListItem(text) { // Create a new text node using the supplied text var newTextNode = document.createTextNode(text); // Create a new li element var newListItem = document.createElement("li"); // Add the text node to the li element newListItem.appendChild(newTextNode); // Add the newly created list item to list unorderedList.appendChild(newListItem); }

 #mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; }

 <div id='mouseTarget'> <ul id="unorderedList"> <li>No events yet!</li> </ul> </div>