Javascript 使光标停留在边界中

我有一个色轮选择器（我从中获取了大量代码）。我试图使色轮光标不超出边界。我不想让它越过灰色的边界

我可以做显而易见的事情，让父对象

div

：

溢出：隐藏

，但这只会隐藏光标，不会让它不通过边界

我认为要编辑的相关变量是以下变量之一（在

hsvMove

函数中，从第39行开始）：

如何使光标不越过边界

（功能（窗口）{
“严格使用”
//一些常用变量
var myColor=新颜色（），
起点，
当前目标，
CurrentTargetLight=0，
PI=Math.PI，
PI2=PI*2；
/* ---------------------------------- */
/*-----HSV圆形颜色选择器------*/
/* ---------------------------------- */
var colorDiskWrapper=document.getElementById（'colorDiskWrapper'），
colorDiskCursor=document.getElementById（'colorDiskCursor'），
colorDisk=document.getElementById（'colorDisk'）；
var colorDiscRadius=colorDisk.offsetHeight/2；
//创建事件函数
var hsvDown=函数（e）{//mouseDown回调
var target=e.target | | e.src元素；
如果（e.preventDefault）e.preventDefault（）；
如果（目标===colorDiskCursor | |目标===colorDisk）{
currentTarget=target.parentNode；
}否则
返回；
startPoint=getOrigin（当前目标）；
CurrentTargetSight=currentTarget.OffsetSight；
addEvent（窗口，'mousemove'，hsvMove）；
hsvMove（e）；
startRender（）；
},
hsvMove=函数（e）{//mouseMove回调
var r=当前目标灯/2，
x=e.pageX-startPoint.left-r，
y=e.pageY-startPoint.top-r，
h=360-（（数学atan2（y，x）*180/PI）+（y<0？360:0）），
s=（数学sqrt（（x*x）+（y*y））/r）*100；
霉色({
h:h，
s:s
}"hsv",；
},
renderHSVPicker=函数（颜色）{//用于“new ColorPicker”的renderCallback
var x=Math.cos（PI2-color.hsv.h*PI2），
y=Math.sin（PI2-color.hsv.h*PI2），
r=颜色.hsv.s*颜色半径；
//定位光标
colorDiskCursor.style.left=（x*r+colorDiscRadius）+'px'；
colorDiskCursor.style.top=（y*r+colorDiscRadius）+'px'；
};
addEvent（colorDiskWrapper，'mousedown'，hsvDown）；//事件委派
addEvent（窗口'mouseup'，函数（）{
removeEvent（窗口“mousemove”，hsvMove）；
stopRender（）；
});
var doRender=函数（颜色）{
renderHSVPicker（彩色）；
},
渲染器，
startRender=功能（一次性）{
如果（一次性）{//仅实例化颜色
多伦德（myColor.colors）；
}否则{
renderTimer=window.setInterval(
函数（）{
多伦德（myColor.colors）；
// http://stackoverflow.com/questions/2940054/
}，13）；//1000/60）；//~16.666->60Hz或60fps
}
},
stopRender=函数（）{
clearInterval（renderTimer）；
};
/*
函数助手
*/
函数getOrigin（elm）{
变量框=（elm.getBoundingClientRect）？elm.getBoundingClientRect（）{
排名：0，
左：0
},
doc=elm&&elm.ownerDocument，
body=doc.body，
win=doc.defaultView | | doc.parentWindow | | window，
docElem=doc.documentElement | | body.parentNode，
clientTop=docElem.clientTop | | | body.clientTop | | 0，//html或body上的边框或两者
clientLeft=docElem.clientLeft | body.clientLeft | 0；
返回{
左：box.left+（win.pageXOffset | | docElem.scrollLeft）-客户端左，
顶部：box.top+（win.pageYOffset | | docElem.scrollTop）-客户端顶部
};
}
函数addEvent（对象、类型、函数）{
addEvent.cache=addEvent.cache |{
_get:函数（对象、类型、函数、仅检查）{
var cache=addEvent.cache[type]| |[]；
对于（var n=cache.length；n--；）{
if（obj===缓存[n].obj&&'+func=====''+cache[n].func）{
func=缓存[n].func；
如果（！checkOnly）{
cache[n]=cache[n]。obj=cache[n]。func=null；
拼接（n，1）；
}
返回函数；
}
}
},
_集合：函数（对象、类型、函数）{
var cache=addEvent.cache[type]=addEvent.cache[type]||[]；
if（addEvent.cache.\u get（obj，type，func，true））{
返回true；
}否则{
cache.push({
func:func，
obj:obj
});
}
}
};
如果（！func.name&&addEvent.cache._set（obj，type，func）| | typeof func！=“function”）{
返回；
}
if（obj.addEventListener）obj.addEventListener（type，func，false）；
else obj.attachEvent（'on'+类型，函数）；
}
函数removeEvent（对象、类型、函数）{
if（typeof func！=“function”）返回；
如果（！函数名）{
func=addEvent.cache._get（obj，type，func）| | func；
}
if（obj.removeEventListener）obj.removeEventListener（type，func，false）；
else obj.detachEvent（'on'+类型，func）；
}
})（窗口）
#彩色磁盘{
背景图像：url（“http://i.imgur.com/tX5NbWs.png");
宽度：350px；
高度：350px；
背景重复：无重复；
光标：指针；
}
#彩色磁盘光标{
位置：绝对位置；
边框：2件纯黑；
边界半径：50%；
宽度：9px；
高度：9px；
光标：指针；
}
问题：

让我们从概述算法开始，这样我们都清楚我们要做什么：每次鼠标移动/点击，计算鼠标相对于色盘（HSV颜色系统）的位置所表示的
H
和
s
值。定期将磁盘光标精确地呈现在与
H
和
Svar r = currentTargetHeight / 2,
x = e.pageX - startPoint.left - r,
y = e.pageY - startPoint.top - r