在mouseup上停止的jQuery事件
我正在尝试创建一个非常简单的应用程序，用户可以在鼠标按钮关闭时绘制一个具有所选颜色的表格，并且当鼠标按下时事件将停止。
绘图效果很好，唯一的问题是当鼠标释放时事件不会停止。 我在很多方面尝试过，但显然我做错了。 还试图绑定和解除绑定事件，但也没有工作。
你可以在这里看到一个版本的代码： 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'); });