Custom Mouseover Trigger d3.js javascript

Question

I am working with d3.js, and would like to create a custom event with a custom trigger.

As I understand 'mouseover' event will be triggered when the mouse pointer is hovering above a certain element, i.e., horizontally and vertically the pointer is within the element.

What I would like to do is to trigger a custom event, say 'xmouseover', that will be triggered as long as the mouse pointer is horizontally within the element. Shouldn't this be a simpler thing to do as I do not need to care about the vertical position?

Answer 1

Mouse events are provided by the browser and you can't implement a custom one like you've described directly. To achieve what you want, you would need to create a "dummy" element that has the same horizontal dimensions as the element you want the custom event for, but covers the entire vertical range. For this dummy element, you can install a mouseover handler that will behave exactly like your xmouseover.