eyecon Colorpicker - 点击事件中的颜色不变

Posted 2023-02-16

【中文标题】eyecon Colorpicker - 点击事件中的颜色不变

【英文标题】：eyecon Colorpicker - color not changing in click event

【发布时间】：2011-08-08 16:34:57

【问题描述】：

我正在使用基于 jquery 的 eyeCon 颜色选择器 (http://www.eyecon.ro/colorpicker/)。

当我在彩色区域上单击并拖动鼠标时，颜色会发生变化。但是当我点击彩色区域时，颜色并没有更新。

我挖掘了它的源代码，发现分别在 mousedown 和 mousemove 上调用了两个名为 downSelector() 和 moveSelector() 的函数。我刚刚在传递它自己的 ev 对象的 downSelector() 函数上添加了对 moveSelector() 的调用。但它不起作用并引发以下错误： 未捕获的类型错误：无法读取未定义的属性“cal”

可能是因为 mousedown 和 mousemove 的 ev 对象不同。

但我需要更新 mousedown 事件的颜色。有什么建议吗？

提前感谢:)

【参考方案1】：

在 colorpicker.js 中，您可以像这样从upSelector 调用moveSelector：

moveSelector = function (ev) 
  change.apply(
  ev.data.cal.data('colorpicker').fields.eq(6)
    .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
    .end().eq(5).val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
    .get(0),[ev.data.preview]
  );
  return false;
,

upSelector = function (ev) 

  moveSelector(ev);

  fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
  $(document).unbind('mouseup', upSelector);
  $(document).unbind('mousemove', moveSelector);
  return false;
, 

这个小技巧效果很好:)

【讨论】：

实际上，只需从upSelector() 中调用moveSelector(ev) 函数即可，无需复制粘贴整个代码

同样适用于换色器，调用 moveHue(ev);在 upHue 函数中。