首頁(yè) 猿問(wèn) 為什么這個(gè)滑塊拖動(dòng)的時(shí)候會(huì)閃

為什么這個(gè)滑塊拖動(dòng)的時(shí)候會(huì)閃

JavaScript

烙印99 2018-09-11 13:13:12

/------------------js部分------------------------- /問(wèn)題是為什么鼠標(biāo)拖拽滑塊的時(shí)候，滑塊會(huì)閃動(dòng)，求大神指點(diǎn)案例代碼：https://jsfiddle.net/bbux0h7v/2/

查看完整描述

1 回答

一只甜甜圈

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊

把offsetY改成pageY就行了。

關(guān)于offsetY的意思，規(guī)范是這么寫(xiě)的：

The MouseEvent.offsetY read-only property provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.

關(guān)于pageY的意思：

The MouseEvent.pageY read-only property returns the vertical coordinate of the event relative to the whole document.

你體會(huì)一下這兩者的區(qū)別，然后再想想為什么offsetY不行。

最后，個(gè)人覺(jué)得你的js代碼寫(xiě)的有點(diǎn)亂……我稍微改了改，你可以參考下：

$(document).ready(function(){    let axiL = 0,
        doc = $(document),
        b = $("#b");    //定義鼠標(biāo)拖動(dòng)時(shí)執(zhí)行的函數(shù)                    
    function move(event){        const top = parseInt(b.css("top"));        let axiN = top + event.pageY - axiL;
        axiN = (axiN < 0) ? 0: axiN;
        axiN = (axiN > 170) ? 170: axiN;
        b.css("top", axiN);
        axiL = event.pageY;
    }

    b.on("mousedown", function() {
        doc.on("mousemove", move);
        axiL = event.pageY;
    });
    doc.on("mouseup", function() {
        doc.off("mousemove", move);
    });
});

反對(duì) 回復(fù) 2018-10-03