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

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

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