Adjunté un evento mouseleave a la etiqueta de selección. Pero quiero que este evento solo ocurra si un usuario primero hace clic en la etiqueta de selección y luego quita el mouse.
function loseFocus() { var dateSelect=document.querySelector('[name="dayCount"]'); dateSelect.blur(); console.log('mouse leave event triggered') } <select name="dayCount" onmouseleave="loseFocus()"> <option >op1</option> <option >op2</option> <option>op3</option> </select>Puede definir una variable como falsa y ejecutar un evento de clic en su menú desplegable, luego, en su devolución de llamada para el evento de clic, establezca esa variable en verdadero. Luego, en su evento de desenfoque, llame a un condicional para verificar si la variable es verdadera.
Es posible que desee realizar un evento de mouseout si no desea tener que hacer clic en el menú desplegable después de realizar una selección.
let dateSelect = document.querySelector('[name="dayCount"]'); let clicked = false; function changeClick(){ clicked = true; } function checkFocus(){ clicked === true ? console.log('BLUR FIRED -> select has lost focus') : null; } function mouseOut(){ clicked === true ? console.log('MOUSEOUT FIRED -> Your mouse is not over the select element') : null; } dateSelect.addEventListener('click', changeClick); dateSelect.addEventListener('blur', checkFocus); dateSelect.addEventListener('mouseout', mouseOut); <select name="dayCount"> <option >op1</option> <option >op2</option> <option>op3</option> </select>