$event.target有时获取的是当前元素的子元素

2020-04-30 08:58:59


解决办法,使用event.currentTarget

这就是事件冒泡,当一个元素触发事件后,会逐层上报给父元素、祖父元素……乃至document,也就是说这些元素都会同时触发事件。这种情况下,event.target就是指最初触发事件的那个子元素(就比如你题目中的img),而event.currentTarget才是被冒泡后触发事件的当前元素(比如li)。这也就意味着,当你点击li时,如果点到的是子元素img,则event.target就是img,而event.currentTarget则是li,而当你点到的是li里面除img之外的其他部分时,event.target和event.currentTarget都是li
所以,现在你知道该怎么做啦?就是不要使用event.target,改用event.currentTarget

  • 2020-03-03 09:51:38

    写一个可插入自定义标签的 Textarea 组件

    为了实现这个功能,我最先想的是改造一个 <textarea> 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性,可以让元素内容可编辑

  • 2020-03-03 20:18:21

    Vuepress如何做到在 Markdown 中使用 Vue 语法

    在 vuepress 刚出时,我就觉得这是个很值得追更的开源项目。果不其然,里面众多的前端编程技巧让我受益良多。 于是在周末这种日子里,人家追剧我追码。 今天,我就和大家分享下 vuepress 是如何做到在 Markdown 中使用 Vue 语法的。

  • 2020-03-03 21:35:57

    PWA:安装 Web 应用

    要完整介绍 PWA 是什么,需要扯一堆名词,毫无意义。 以改造公羊阅读的过程为例,简要的说明什么是 PWA。