function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
louisa barrett 7louisa barrett 7 

lightning component get mouse position on nested components

Hi,

I have a scenario where I need to get the mouse position for nested aura components.
I have tried using getBoundingClientRect, clientX/Y, pageX/Y, offsetLeft/Top, but they are not taking into consideration the space that the other component could be taking up above or to the side of it.

So in the example below I need to get the mouse position from within the Calendar_Scheduling component, but that component is not aware of the CalendarFilters component that is sitting above it. So when using any of the getBoundingClientRect, clientY, pageY or offsetTop the position that is being returned is incorrect. 
Is there a property that I can use that will return the correct co-ordinates regardless of any other components that are on the page
 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    
    <lightning:layout class="slds-theme_default" multipleRows = "true">    
        <lightning:layoutItem size="12" mediumDeviceSize="12" padding="around-small">
            <c:CalendarFilters Initialised="{!v.initialised}" 
                               Department="{!v.resourceDepartment}" 
                               Location="{!v.resourceLocation}"
                               ShowWorkOrders="{!v.showWorkOrders}"
                               ShowProfessionalServiceWork="{!v.showPSWork}"
                               ShowPlaceholders="{!v.showPlaceholders}"
                               IsSchedulingCalendar="{!v.isSchedulingCalendar}"
                               ProjectManager="{!v.projectManager}"/>
        </lightning:layoutItem>
        
        <lightning:layoutItem size="12">
            <c.Calendar_Scheduling Enabled="{!v.initialised}" 
                                   Department="{!v.resourceDepartment}" 
                                   Location="{!v.resourceLocation}"
                                   ProjectManager="{!v.projectManager}"
                                   IsSchedulingCalendar="{!v.isSchedulingCalendar}"/>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

Many thanks