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

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

Answer 2

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