Question

我发现flexi颜色选择器脚本可以根据纯JavaScript选择颜色，但不允许拖动进行选择，只需单击调色板。

我做了一点修复：

if (slideElement.attachEvent) {
    slideElement.attachEvent('onclick', slideListener(this, slideElement, pickerElement));
    pickerElement.attachEvent('onclick', pickerListener(this, pickerElement));
} else if (slideElement.addEventListener) {
    slideElement.addEventListener('click', slideListener(this, slideElement, pickerElement), false);
    pickerElement.addEventListener('click', pickerListener(this, pickerElement), false);
}

到

if (slideElement.attachEvent) {
    slideElement.attachEvent('onmouseup', slideListener(this, slideElement, pickerElement));
    slideElement.attachEvent('onmousedown', slideListener(this, slideElement, pickerElement));

    pickerElement.attachEvent('onmouseup', pickerListener(this, pickerElement));
    pickerElement.attachEvent('onmousedown', pickerListener(this, pickerElement));
} else if (slideElement.addEventListener) {
    slideElement.addEventListener('mouseup', slideListener(this, slideElement, pickerElement), false);
    slideElement.addEventListener('mousedown', slideListener(this, slideElement, pickerElement), false);

    pickerElement.addEventListener('mouseup', pickerListener(this, pickerElement), false);
    pickerElement.addEventListener('mousedown', pickerListener(this, pickerElement), false);
}

它有效但是只有在页面加载时才会起作用，如果你多次开始拖动背景图片，有没有办法解决这个问题？

另外可选的是让它在按住鼠标按钮的同时改变颜色并尽可能拖动鼠标。

http://jsfiddle.net/NkH3q/

Answer 1

您在http://jsfiddle.net/NkH3q/3/

（不适用于IE8＆lt;因为我没有IE来测试它，但你应该能够复制IE的处理程序，它应该没有问题。）

解释

你所追求的是，只有在鼠标停止时才能使拣选器移动/拖动。要实现此目的，您需要在 mousedown

上添加一个监听器

Elem.addEventListener('mousedown', startDragging, false);

你注意到我们还没有为 mouseup 事件添加一个监听器，而我们现在还不知道。 startDragging函数只设置一个标志

this.dragging = false;
var q = this; // cache this to use it in another function scope

var startDragging = function() {
  q.dragging = true;  
  document.addEventListener('mouseup', stopDragging , false);
};

一切都应该非常清楚。您会注意到我们在文档中设置了 mouseup 侦听器。这样做是为了确保即使用户将光标导出颜色选择器，当点击被释放（mouseup）时，我们也会抓住该事件。

让我们看看 stopDragging 功能应如何显示

    var stopDragging = function() {
      q.dragging = false;  
      document.removeEventListener('mouseup', stopDragging , false);
    };

同样，我们将拖动标志设置为false，然后删除我们在文档中设置的 mouseup 侦听器。我们不想与听众一起乱扔垃圾。

现在 mousemove 功能

var pickerFunc = pickerListener(this, pickerElement ),
    slideFunc = slideListener(this, slideElement, pickerElement);

slideElement.addEventListener('mousemove', slideFunc, false);
pickerElement.addEventListener('mousemove',pickerFunc, false);

....
function pickerListener(ctx, pickerElement) {
    return function(evt) {
        if (!ctx.dragging)   
          return false;
.....

首先，因为pickerListener / slideListener返回函数所以不需要多次调用它们，前提是我们每次都使用相同的参数。因为我们最终会有重复的功能。因此，最好这样做一次并缓存它们（slideFunc / pickerFunc vars）

然后在这些函数的开头，我们添加了一个拖动标志的检查。如果设置为false，我们什么都不做。

为了防止选择内容并破坏“拖动”。控制，我们需要添加

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none; 
-ms-user-select: none;
user-select: none;

在包装元素处。较早版本的IE（7,8,9）和Opera在包装元素上需要 unselectable =＆＃34; on＆＃34; 属性。

JavaScript颜色选择器

1 个答案: