Vue: event.target is null in Chrome on img

Created on 9 Nov 2017  ·  4Comments  ·  Source: vuejs/vue

Version

2.5.3

Reproduction link

https://jsbin.com/jafufah/1/edit?html,js,console,output

Steps to reproduce

Only in Chrome (61.0.3163) and sometimes Safari (11.0.1).

  1. Open link to jsbin
  2. Click Run with JS
  3. See that the console first prints a reference of event.target and then null for the same property.

What is expected?

In Firefox, Edge and IE11 the event.target is never null.

What is actually happening?

event.target is null if event is stored in variable until next tick.


I'm not sure if this is a bug in Vue.js or in Chrome but I thought more eyes on the matter will help to clarify.

I first saw this inside a nuxt.js application but it's easy to reproduce in just vue.js, so I guess it's either in vue core or in Chrome (blink/webkit).

I've done the same with an <object> load handler and this has never happen - it's specific to the <img> element or the size of the file to load.

All 4 comments

it's not a bug: you have no guarantee for the event to be valid in an asynchronous callback after it is used. So basically you have to save whatever you need, in your case, target, and use that instead of the event variable directly

@posva Do you have any documentation for that statement? I don't think you're wrong, I just have never seen or heard that before.

I couldn't find it 🙁
But, you can see it here, with no Vue: https://jsbin.com/danuxohoga/1/edit?html,js,console,output

I was searching for somewhere that have any kind of documentation of DOM events life-span but found nothing. Your jsbin will be the crown example for thousands, to link to from SO ;)

Seriously, last time I had this issue was in a hybrid VM called Titanium, where all elements mapped to Java or Object-C counter parts and these would disappear if the VM deemed them unused. I never thought I would see it in a browser. But today was the day! :tada: 💩

Was this page helpful?
0 / 5 - 0 ratings