不要在点击重叠元素时失去输入焦点

Question

I have the above widget which has the below DOM:

HTML :

<div>
    <div class="eye" onclick="toggleEye(event);">
        <i class="fa fa-eye"></i>
    </div>
</div>

CSS :

.eye {
   position: 'absolute';
   right: 30px,
   margin-top:10px
}

If you know CSS, you will conclude that <i /> & <input:password> are overlapped.

I want to not lose input focus when I click on the overlapped element which is <i /> .

I tried with event.target , event.currentTarget and event.relatedTarget .. However , .. in vain ,, no solution

toggleEye(e){
   if(!e.target.tagName==='INPUT'){
       // don't lose on-focus  : How to ?
    }
}
 

Answer 1

If overlapped element is just for styling you can use CSS property pointer-events .

By setting pointer-events:none to overlapped element, click event will be triggered on the necessary element.