icon元素上事件的绑定与解绑

2019-10-02  本文已影响0人  御用闲人豪

    使用了一个Element UI中tree控件,tree里用icon元素增加了新增、编辑、删除功能,但在第一次新增还没有完成输入前,又可以继续点击其他的新增,这样的用户体验一点也不好。

    使用获取元素,再用 元素.onclick = " ",这样并不起作用。因为icon是以伪元素的形式存在的,这样是无法获取事件的。

    研究了一下发现,元素本身:pointer-events: none;禁用点击事件

                                其伪元素通过pointer-events: auto;启用点击事件,使鼠标只能点击到伪元素

    利用这个提示,首先获取icon元素,然后再利用 icon元素.style.pointerEvents = " none" 

    就可以实现对icon元素的事件禁用

上一篇 下一篇

猜你喜欢

热点阅读