Question

我可以在某个点击事件上激活一个函数，但是每当我在另一个div上执行click事件时我想停止该函数。

到目前为止，这是我的功能：

$('#text-tab').click(function() {
    writeOnCanvas(true);
});

$('#paint-tab, #sticker-tab, #done-tab').click(function() {
    writeOnCanvas(false);
});


function writeOnCanvas(bool) {
    if(bool) {
        $('body').click(function(e) {

            var clickedOnCanvas = e.target.id == "canvas" || $(e.target).parents('#canvas').length ? true : false;
            var alreadyTextArea = $('textarea.textarea_editable')[0];

            if(clickedOnCanvas) {
                if(alreadyTextArea) {
                    drawSentence();
                } else {
                    createTextArea(e);
                }
            }
        });

        $('#text > div > .color_choice').click(function() {
            var textColor = $(this).css('background-color');
            $('.textarea_editable').css('color', textColor);
        });

        $('#text > div > div:not(".color_choice")').click(function() {
            var textSize = $(this).css('font-size');
            $('.textarea_editable').css('font-size', textSize);
            $('canvas').attr('data-textSize', textSize);
        });
    } else {
        console.log('stop working');
        return false;
    }
}

正如您所看到的，当我点击#text-tab时，我将我的功能设置为＆＃34; true＆＃34;，这是完美的。但是，即使我点击#paint-tab，＃sticker-tab甚至＃done-tab，该功能仍在工作，即使我看到console.log（＆＃39;停止工作＆＃39;）;

编辑：

我试图设置一个全局变量但是现在我的函数拒绝工作，即使我单击#text-tab并将全局变量设置为true。

var WRITEONCANVAS = false;
writeOnCanvas();

$('#text-tab').click(function() {
    WRITEONCANVAS = true;
});

$('#paint-tab, #sticker-tab, #done-tab').click(function() {
    WRITEONCANVAS = false;
});


function writeOnCanvas() {
    if(WRITEONCANVAS) {
        $('body').click(function(e) {

            var clickedOnCanvas = e.target.id == "canvas" || $(e.target).parents('#canvas').length ? true : false;
            var alreadyTextArea = $('textarea.textarea_editable')[0];

            if(clickedOnCanvas) {
                if(alreadyTextArea) {
                    drawSentence();
                } else {
                    createTextArea(e);
                }
            }
        });

        $('#text > div > .color_choice').click(function() {
            var textColor = $(this).css('background-color');
            $('.textarea_editable').css('color', textColor);
        });

        $('#text > div > div:not(".color_choice")').click(function() {
            var textSize = $(this).css('font-size');
            $('.textarea_editable').css('font-size', textSize);
            $('canvas').attr('data-textSize', textSize);
        });
    } else {
        return false;
    }
}

Answer 1

使用unbind删除绑定功能，例如click

请参阅此小提琴https://jsfiddle.net/jc4wzerf/1/

关键是：

$('.body-text').unbind( "click" )

在您的情况下，您将使用：

$('body').unbind( "click" )

修改

我的错，unbind在3.0中已弃用。作为替代方案，您可以按照 charlietfl
的建议使用off
https://jsfiddle.net/jc4wzerf/3/

$('body').off( "click" )

或

只需使用标记和单个处理程序

https://jsfiddle.net/jc4wzerf/2

如何在激活后停用功能

1 个答案: