javascript - 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);
        }
    });