x icon 引发input事件优先级问题

功能描述

我司要求在input框中引入清除数据功能，并要求当input失去焦点时将x icon隐藏。效果如下。

bug描述

1.当input失去焦点的时候执行的是onblur事件，同时会将x icon进行隐藏。但是x icon也属于input框以外，因此，当点击x icon时，首先触发的是 onblur事件，而不是绑定在x icon上的clearInput方法。

2.兼容性bug

（1）chrome在input元素中引入了type="search",会自动给input框添加，

问题所在：目前只能在chrome中运行，

（2）IE10以后在，input type="text"中也自动添加了

当你手动添加X icon时，会在IE上出现两个XX。

优先级bug出现原因

js是单线程语言，同时只能执行一种方法。

代码逻辑如下

<input type="text" onblur="handleBlur"></input>
<img onclick="clearInput" src="../../close.png" alt="closeIcon">

解决方案

优先级解决方案

提高clearInput事件的优先级。

<input type="text" onblur="handleBlur"></input>
<img onmousedown="clearInput" src="../../close.png" alt="closeIcon">

兼容性问题解决方案

IE

::-ms-clear是文本清除按钮，也就是input右方的X

    input::-ms-clear {
        display: none;
    }

将IE默认的X隐藏

事件绑定的优先级