jQuery 事件在 mouseup 时停止答案

【问题标题】：jQuery event to stop on mouseupjQuery 事件在 mouseup 时停止
【发布时间】：2012-05-29 23:48:20
【问题描述】：

我正在尝试制作一个非常简单的应用程序，在该应用程序中，当鼠标按钮按下时，用户可以使用选定的颜色绘制到表格中，而当鼠标按下时，事件停止。

绘图效果很好，唯一的问题是释放鼠标时事件不会停止。我已经尝试了很多方法，但显然我做错了什么。还尝试绑定和取消绑定事件，但也没有用。

您可以在此处查看代码的一个版本： http://jsfiddle.net/mFzkG/8/

非常感谢任何帮助！

【问题讨论】：

标签： jquery mousedown mouseup

【解决方案1】：

您所要做的就是绑定和取消绑定表格单元格中的事件。

 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/

【讨论】：

像魅力一样工作！非常感谢 Senad！

【解决方案2】：

为什么不这样做：

    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() 函数中检查此变量。

【讨论】：

【解决方案3】：

你也可以试试这个 jquery 代码：

$('table').mousedown(
function() {
    $('td').bind('mousedown mousemove', function(){
        $(this).css(
        "background-color", currentColor
        );            
    });
    });
$('table').mouseup(
    function() {
        $('td').unbind('mousedown mousemove');
    });

【讨论】：