Question

我在Javascript中制作了一个简单的滑块。

首先，我创建一个DIV并附加一个代表滑块“空白”状态的图像。 DIV对mousedown，mouseup和mousemove做出反应。每次触发mousedown时，都会将事件侦听器设置为mousemove（根据鼠标的坐标调整滑块），并且在触发mouseup时，将删除事件侦听器。

DIV中有另一张图像，与第一张图像重叠。它展开并代表滑块。

问题在于，当我点击DIV并开始移动鼠标时，它反应就像是要我拖动一些东西。也许是图片（空白状态）。我看到“不能放在这里”的图标看起来像是一个错误的标志。

如何摆脱它？我可以粘贴滑块的一些方法，但它与问题不太相关......

所以这里是滑块的完整代码：

volCont是容器DIV，volGauche是滑块的左端，volDroite是右边的一个，volMilieu是主要的空白图片，而volPx是代表滑块的图片（原来是1像素宽，一直扩展）

this.createVolBar = function()
{
    var volCont = document.createElement("DIV");
    volCont.id = "volCont";
    volCont.style.position = "absolute";
    volCont.style.left = "168px";
    volCont.style.top = "206px";
    volCont.style.width = "89px";
    volCont.style.height = "20px";

    var volGauche = document.createElement("IMG");
    volGauche.id = "volBarGauche";
    volGauche.style.position = "absolute";
    volGauche.style.left = "3px";
    volGauche.style.top = "6px";
    volGauche.style.width = "3px";
    volGauche.style.height = "9px";
    volGauche.src = plugImg.volGaucheOff;
    volCont.appendChild(volGauche);

    var volDroite = document.createElement("IMG");
    volDroite.id = "volBarDroite";
    volDroite.style.position = "absolute";
    volDroite.style.left = "83px";
    volDroite.style.top = "6px";
    volDroite.style.width = "3px";
    volDroite.style.height = "9px";
    volDroite.src = plugImg.volDroiteOff;
    volCont.appendChild(volDroite);

    var volMilieu = document.createElement("IMG");
    volMilieu.id = "volMilieu";
    volMilieu.style.position = "absolute";
    volMilieu.style.left = "6px";
    volMilieu.style.top = "6px";
    volMilieu.style.width = "77px";
    volMilieu.style.height = "9px";
    volMilieu.src = plugImg.volMilieu;
    volCont.appendChild(volMilieu);

    var volPx = document.createElement("IMG");
    volPx.id = "volPx";
    volPx.style.position = "absolute";
    volPx.style.left = "6px";
    volPx.style.top = "6px";
    volPx.style.width = "30px";
    volPx.style.height = "9px";
    volPx.src = plugImg.volBarPx;
    volCont.appendChild(volPx);

    // slide
    volCont.addEventListener('mousedown', that.startSlide, false);  
    volCont.addEventListener('mouseup', that.stopSlide, false);

    that.volCont = volCont;
    that.volPx = volPx;
    that.volMilieu = volMilieu;
    that.volGauche = volGauche;
    that.volDroite = volDroite;

    this.plugBox.appendChild(volCont);
};

以下是滑动方法：

this.startSlide = function(event)
{
    var set_perc = (event.clientX - that.volCont.offsetLeft) / (that.volCont.offsetWidth);
    that.setSlide(set_perc);
    that.volCont.addEventListener('mousemove', that.moveSlide, false);
};

this.moveSlide = function(event)
{
    var set_perc = (event.clientX - that.volCont.offsetLeft) / (that.volCont.offsetWidth);
    that.setSlide(set_perc);
};

this.stopSlide = function(event)
{
    var set_perc = (event.clientX - that.volCont.offsetLeft) / (that.volCont.offsetWidth);
    that.setSlide(set_perc);
    that.volCont.removeEventListener('mousemove', that.moveSlide, false);
}

Javascript简单滑块：如何在mouseMove上移动拖动

0 个答案: