24

I'm trying to listen to the X position of my mouse in an Angular2 Directive like this:

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event.clientX)
}

but I get the error

Property 'clientX' does not exist on type 'Event'.

This is odd because this listener

@HostListener('mousemove', ['$event'])
onMousemove(event: Event): void  { 
  console.log(event)
}

logs out an event object

enter image description here

Why can I not access event.clientX?

Community
  • 1
  • 1
Nate May
  • 3,814
  • 7
  • 33
  • 86

1 Answers1

41

Change the parameter type

onMousemove(event: MouseEvent): void  { 
  console.log(event.clientX)
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • I have a similar issue, I tried with several different types, including `MouseEvent` that is the one I get in my console.log() but it keeps saying: `Property 'layerY' does not exist on type 'MouseEvent'` – Diego Ortiz Sep 30 '19 at 17:20
  • 1
    Interesting. It not a standardized property but according to https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerY all browsers support it. Check your browsers changelog if it was discontinued there. – Günter Zöchbauer Sep 30 '19 at 17:27