JS mousemove事件监听问题?

<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,在鼠标移动的时候,出现了不正常的值:

clipboard.png

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

阅读 2.2k
评论
    3 个回答

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

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

        • 193

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

          撰写回答

          登录后参与交流、获取后续更新提醒