我试图做一个非常简单的应用程序,其中当鼠标按键时,用户可以绘制了一张桌子,一个选择的颜色,而当鼠标移动起来的情况下停止。
绘图效果很好,唯一的问题是鼠标被释放时,事件不会停止。 我试过它在许多方面,但很明显,我做错了什么。 也试图绑定和取消绑定事件,但也不能工作。
:你可以在这里看到的代码的一个版本http://jsfiddle.net/mFzkG/8/
任何帮助非常感谢!
我试图做一个非常简单的应用程序,其中当鼠标按键时,用户可以绘制了一张桌子,一个选择的颜色,而当鼠标移动起来的情况下停止。
绘图效果很好,唯一的问题是鼠标被释放时,事件不会停止。 我试过它在许多方面,但很明显,我做错了什么。 也试图绑定和取消绑定事件,但也不能工作。
:你可以在这里看到的代码的一个版本http://jsfiddle.net/mFzkG/8/
任何帮助非常感谢!
所有你需要做的就是结合并从表格单元格解除绑定事件。
var currentColor;
$('.colors').click(function() {
$(this).fadeTo("fast", 0.40);
currentColor = $(this).css("background-color");
$('.colors').not(this).fadeTo("fast", 1);
});
$('table').mousedown(
function() {
$('td').bind('hover', function(){
$(this).css(
"background-color", currentColor
);
});
}).mouseup(function(){
$('table td').unbind('hover');
$('table').css(function(){
return false;
});
});
$("#reset").click(function() {
$("td").css("background-color", "white")
}
);
这里是工作的jsfiddle http://jsfiddle.net/mFzkG/12/
为什么不能像这样做:
var currentColor;
var isMouseDown = false;
$('.colors').click(function() {
$(this).fadeTo("fast", 0.40);
currentColor = $(this).css("background-color");
$('.colors').not(this).fadeTo("fast", 1);
});
$('td').mousedown(function() {
isMouseDown = true;
});
$('td').mouseup(function() {
isMouseDown = false;
});
$('td').hover(function() {
if (isMouseDown) {
$(this).css("background-color", currentColor);
}
});
$("#reset").click(function() {
$("td").css("background-color", "white")
});
所以,我认为正确的实施方法是,捕获mouseup
/ mousedown
事件,保持在可变状态isMouseDown
,并在检查该变量hover()
函数。
你也可以试试这个jQuery代码:
$('table').mousedown(
function() {
$('td').bind('mousedown mousemove', function(){
$(this).css(
"background-color", currentColor
);
});
});
$('table').mouseup(
function() {
$('td').unbind('mousedown mousemove');
});