I have attached a mouseleave event to the select tag. But I want this event should only occur if a user first clicks the select tag and then removes the mouse from.
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>You can define a variable as false and run a click event on your drop down, then in your call back for the click event set that variable to true. Then in your blur event call back a conditional to check if the variable is true.
You may want to do a mouseout event if you don't want to have to click off the drop down menu after a selection has been made.
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>