mousemove期间的event.offsetX

Question

当我将鼠标移到元素上时，我需要找到offsetX位置。 问题是，当我移动鼠标时，我正在获取内部存在的子元素的值。 即使在子目标中移动鼠标，也可以识别主要对象的鼠标位置吗？

我无法使用event.pageX因为我正在为元素使用transform: scale(1) 。

 $('.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

我通过更改如下脚本找到了答案。

$('.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);
        }
    });