Event Handlers (Hovering)

mouseHover: Hovering In and Out

The mouseHover LogUI event handler captures both the mouseenter and mouseleave events to provide a complete solution for capturing hovering in and out of a given element on a page.

Example Usage

Below is a JavaScript snippet that shows an example configuration mapping to demonstrate how to use the mouseHover LogUI event handler.

'entity-mousemovements': {
    selector: '#entity-card',
    event: 'mouseHover',
    properties: {
        mouseenter: {
            name: 'ENTITY_CARD_HOVER_IN',
        },
        mouseleave: {
            name: 'ENTITY_CARD_HOVER_OUT',
        }
    },
}

Note the inclusion of a properties setting. Within this setting are further nested JavaScript objects, one for each of the two constituent DOM events that are captured with the mouseHover LogUI event handler. Each of these can contain a name setting, which provides a name to be appended to the relevant event in the interaction log for both mouseenter and mouseleave events.

In this example, when the user hovers over the #entity-card element, an event with name ENTITY_CARD_HOVER_IN is logged; an event with ENTITY_CARD_HOVER_OUT is logged when the user's cursor leaves the bounding box of the #entity-card element.