손떨림 방지를 사용하여 마우스를 밖으로 이동할 때 DIV가 사라지도록 합니다.
div 태그 자체에서는 onblur 이벤트를 지원하지 않기 때문에 버튼을 클릭하면 팝업되는 div에 대해 div가 포커스를 잃고 onblur를 사용할 수 없을 때 사라지도록 만들고 싶습니다.
그러나 onmouseout과 이벤트를 사용하면 DIV가 초점을 잃고 사라지는 기능을 실현할 수 있습니다. 제거 및 사라지기를 구현하기 위해 onmouseout을 직접 사용하는 데 문제가 있을 수 있습니다. 버튼의 위치와 팝업 div의 위치가 일치하지 않으면 마우스가 움직일 때 onmouseout 이벤트가 즉시 트리거되므로 이는 쓸모가 없습니다.
흔들림 방지, onmouseout 및 onmouseover의 조합을 사용하여 좋은 경험으로 흐림 이벤트를 달성합니다.
/** *div 이벤트 위로 마우스 이동*/ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){clearTimeout(outTimer); //div가 사라지지 않으면 div를 안으로 이동한 다음 Clear 마지막으로 제거된 이벤트clearTimeout(overTimer); //손떨림 방지 overTimer = setTimeout(()=>{ ele.style.display = block; },500) /** * 마우스가 밖으로 움직입니다*/ function moveOutEvent(ele,outTimer) { return function(){clearTimeout(outTimer); //떨림 방지 outTimer = setTimeout(()=>{ //밖으로 이동한 후 500ms를 기다린 후 이 div 요소가 사라집니다. .style .display = 없음 },500);그러다 우연히 div에 tabindex 속성을 추가하면 블러 이벤트를 구현할 수 있다는 사실을 발견했기 때문에 위 코드가 헛되게 작성되었을 수도 있습니다. (PS 위의 경험이 더 좋아지고 우발적인 터치가 많이 줄어들 것이라고 생각합니다.)
//tabindex가 설정된 후 요소는 기본적으로 점선을 추가하고 ouline=0을 통해 제거합니다(IE에서는 hidefocus=true로 설정) <div tabindex=0 outlook=0 hidefocus=true></div>
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.