JS mousemove事件監(jiān)聽(tīng)問(wèn)題？

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

這是結(jié)構(gòu)代碼

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

這是一個(gè)調(diào)色板的Demo，在鼠標(biāo)移動(dòng)的時(shí)候，出現(xiàn)了不正常的值：

我確定我移動(dòng)的方向無(wú)錯(cuò)誤，但是在第四行和倒數(shù)第三行出現(xiàn)了不正常的數(shù)值，是我的代碼問(wèn)題嗎？
在百度、Google、問(wèn)人后無(wú)果，請(qǐng)大神解惑，感激。