jQuery的情况下,停止对鼠标松开(jQuery event to stop on mouseup

2019-09-17 14:11发布

我试图做一个非常简单的应用程序,其中当鼠标按键时,用户可以绘制了一张桌子,一个选择的颜色,而当鼠标移动起来的情况下停止。

绘图效果很好,唯一的问题是鼠标被释放时,事件不会停止。 我试过它在许多方面,但很明显,我做错了什么。 也试图绑定和取消绑定事件,但也不能工作。

:你可以在这里看到的代码的一个版本http://jsfiddle.net/mFzkG/8/

任何帮助非常感谢!

Answer 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/



Answer 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()函数。



Answer 3:

你也可以试试这个jQuery代码:

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


文章来源: jQuery event to stop on mouseup