event.offsetX during mousemove

Question

When I move the mouse over the element I need to find the offsetX position. The problem is that when I move the mouse I'm getting the value for the child element which is present inside. Is it possible to identify the mouse position of my main object even if I move my mouse in child target?

I'm not able to use event.pageX because I'm using transform: scale(1) for the element.

 $('.main').on('mousemove', function(event) { event.preventDefault(); $(this).closest('.outer').find('p').html(event.offsetX); }); 

 <style> * { margin: 0; } .outer { border: 1px solid #ff0000; float: left; margin: 10px; padding: 5px; overflow: hidden } .inner > svg { width: 100; height: 100px; } .inner { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transform-origin: 0 0; } .two { -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); } .three { -ms-transform: scale(.5); -webkit-transform: scale(.5); transform: scale(.5); } p { position: relative; z-index: 1; } </style> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="inner one"> <svg style="border:1px solid #000" class="main"> <g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16"> <foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> <rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect> <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%"> <div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;"> <div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div> </div> </foreignObject> </svg> </foreignObject> </g> </svg> </div> <p>Value</p> </div> <div class="outer"> <div class="inner two"> <svg style="border:1px solid #000" class="main"> <g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16"> <foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> <rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect> <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%"> <div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;"> <div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div> </div> </foreignObject> </svg> </foreignObject> </g> </svg> </div> <p>Value</p> </div> <div class="outer"> <div class="inner three"> <svg style="border:1px solid #000" class="main"> <g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16"> <foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> <rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect> <foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%"> <div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;"> <div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div> </div> </foreignObject> </svg> </foreignObject> </g> </svg> </div> <p>Value</p> </div> 

Answer 1

I Found the answer by change the script as given below.

$('.main').on('mousemove',  function(event) {
        event.preventDefault();
        if($(event.target).attr('class')== 'main')
            $(this).closest('.outer').find('p').html(event.offsetX);
        else{
            var val = parseInt($(event.target).closest('g').attr('transform').split(/[()]/)[1].split(',')[0]);
            $(this).closest('.outer').find('p').html(event.offsetX+val);
        }
    });