不要忽视输入重点点击重叠元素

Question

我有上面的小部件，它有以下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
}

如果你了解CSS，你会得出结论<i />＆amp; <input:password>重叠。

点击重叠元素<i />时，我不想丢失输入焦点。

我尝试了event.target，event.currentTarget和event.relatedTarget ..然而，......徒劳，没有解决方案

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

Answer 1

如果重叠元素仅用于样式，则可以使用CSS属性pointer-events。

通过将pointer-events:none设置为重叠元素，将在必要元素上触发click事件。