JS mousemove事件监听问题？

Question

<div class="colorPanel">
    <div class="selector"><span></span></div>
    <div class="bg bg1"></div>
    <div class="bg bg2"></div>
</div>

这是结构代码

$(document).ready(function () {
    var eventCrit = false;
    var colorPanel = $('div.colorPanel');
    colorPanel.mousedown(function(e) {
        eventCrit = true;
        handleMousemove(event, colorPanel);
    });
    $(document).mousemove(function(e) {
        if(!eventCrit) return;
            handleMousemove(event, colorPanel);
    });
    colorPanel.mouseup(function(e) {
        eventCrit = false;
    });    
});
var handleMousemove = function (event, element) {
    event.preventDefault();
    var leftValue = (event.offsetX / element.width()) * 100 + '%';
    var topValue = (event.offsetY / element.height()) * 100 + '%';
    var selector = $('.selector');
    console.log(leftValue, topValue);
    selector.css({left: leftValue, top: topValue});
}

这是一个调色板的Demo，在鼠标移动的时候，出现了不正常的值：

我确定我移动的方向无错误，但是在第四行和倒数第三行出现了不正常的数值，是我的代码问题吗？
在百度、Google、问人后无果，请大神解惑，感激。

Answer 1

给div.selector元素添加上pointer-events: none;样式即可
问题是由于在触发mousemove事件时，鼠标移动到了这个图标元素上，所以造成了该问题
给元素加上pointer-events: none;表示鼠标事件穿透该元素并指定该元素下面的某个元素
如果你想了解pointer-events属性，MDN有给出详细解释：
https://developer.mozilla.org...

Answer 2

把 element.width() 和 element.height() 提前保存起来看看

Answer 3

遇到这种问题，你自己在打印的时候详细一点，把计算该数值的每一项都打印一下，找到是哪项不一样了再去找为什么，现有的代码也看不出啥~~