Question

我有一个Vue.js应用程序，中间有一个带有矢量图标的按钮。单击该按钮时我想眨眼。

代码如下：

up (event) {
  event.currentTarget.style.background = 'blue'
  setTimeout(() => {
    event.currentTarget.style.background = '#fcfcfc'
  }, 100)
},

问题是，当我单击按钮时，它会涂成蓝色，但不会使用setTimeout来涂回。

我做错了什么？

Answer 1

大多数DOM事件在树上传播。因此，最初它们会在您期望的元素上触发（例如，被单击的按钮），然后同一事件将对该元素的所有祖先依次触发，并逐渐沿树行进。所有这些事件都使用相同的event对象，并且某些属性在传播时会发生变化。

event.target是发生原始事件的元素。

随着事件在DOM树上传播，event.currentTarget反映了传播中的当前元素。因此，它与target相同，然后逐渐上升到DOM树的顶部。在函数内部，它最初将是您在其上注册侦听器的元素。到计时器触发时，它就会走到树顶。

解决方案是在首次遇到该元素时获取对该元素的引用：

up (event) {
  const el = event.currentTarget
  el.style.background = 'blue'

  setTimeout(() => {
    el.style.background = '#fcfcfc'
  }, 100)
},