5

マウスボタンを押すとユーザーが選択した色でテーブルに描画でき、マウスを上げるとイベントが停止する、非常にシンプルなアプリケーションを作成しようとしています。

描画はうまく機能しますが、唯一の問題は、マウスを離してもイベントが停止しないことです。私はそれを多くの方法で試しましたが、明らかに私は何か間違ったことをしています。また、イベントのバインドとバインド解除を試みましたが、どちらも機能しませんでした。

ここでコードの1つのバージョンを見ることができます：http： //jsfiddle.net/mFzkG/8/

どんな助けでも大歓迎です！

4

3 に答える 3

5

あなたがしなければならないのは、テーブルセルからのイベントのバインドとバインド解除です。

 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/

于 2012-05-29T15:35:12.800 に答える
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()。

于 2012-05-29T15:46:01.087 に答える
2

このjqueryコードを試すこともできます：

$('table').mousedown(
function() {
    $('td').bind('mousedown mousemove', function(){
        $(this).css(
        "background-color", currentColor
        );            
    });
    });
$('table').mouseup(
    function() {
        $('td').unbind('mousedown mousemove');
    });
于 2012-05-29T15:48:20.037 に答える