Javascript .on和.off在多个事件和元素中协同工作

我有一些编辑选项供用户使用，例如更改字体大小或字体系列，甚至div的颜色，但我有一个问题，希望对你们来说非常简单

基本上只要有人完成设置字体系列或任何其他我想做的功能。关闭事件停止特定功能的工作

下面是发生的情况，有人选择了一个字体系列并在div1中更改字体，然后他们选择了字体大小并希望在div2中更改字体大小，但是字体系列和字体大小都被应用，因为字体系列中的值一直被存储

我想到了3种解决方案，但我不确定它们是否正确： 1.在每个元素上执行一个循环。除单击的元素外，关闭其他元素。 2.仅设置1个变量，该变量将根据按下的按钮被不同的值替换？ 3.是否可以使用不同的事件侦听器，使每个功能独立工作

这里有一个小演示来说明我的意思： 1.应用于div的蓝色背景色。 2.选择字体系列并应用于不同的div，但也应用背景色

当我选择字体系列时，它应该删除背景色的值，而不应用它，只应用字体系列，反之亦然

所以，总而言之，我正在寻找一个解决方案，在事件被使用后如何关闭它，若再次按下按钮，那个么将元素绑定回去，使其工作。确保每个“事件”侦听器独立工作，而不是一起工作。我不确定我是否应该把它放在某个循环中，或者是否有其他解决方案

  var font;
    $("#fonts1").on("change", function(e){
        font = $(this).val();
        e.stopPropagation();
    });
    $("#content-link2").on("click", "*", function(e) {
        $(this).css('font-family',font);
        e.stopPropagation();
    });
    var font2;
    $("#googlefonts1").on("change", function(){
        font2 = $(this).val();
    });
    $("#content-link2").on("click", "*", function() {
        $(this).css('font-family',font2);
    });
    var fsize;
    $("#fontsizes1").on("change", function(){
        fsize = $(this).val();
    });

<button style="display: none" class="form-control margin btn btn-primary" id="showColor">Show Colors</button>

            <button style="display: none" class="form-control margin btn btn-primary" id="hideColor">Hide Colors</button>

            <input style="display: none" class="btn btn-default form-control margin" type="color" id="colorChoice">

            <a style="display: none" href="#" class="btn btn-default form-control margin" id="cp4">Background</a>

            <button style="display: none" onclick="$('#fonts1').bfhfonts({font: 'Arial'})" id="fontsShow" class="btn btn-primary form-control margin">Load Fonts</button>

            <button style="display: none" class="btn btn-primary form-control margin" id="fontsHide">Hide Fonts</button>

            <select style="display: none" data-font="Arial" id="fonts1" class="form-control margin"></select>

            <button style="display: none" onclick="$('#googlefonts1').bfhgooglefonts({font: 'Lato'})" id="googleShow" class="btn btn-primary form-control margin">Google fonts</button>
            <button style="display: none" class="btn btn-primary form-control margin" id="googleHide">Hide Google</button>
            <select style="display: none" id="googlefonts1" class="form-control margin"></select>
            <button style="display: none" onclick="$('#fontsizes1').bfhfontsizes({fontsize: '12'})" id="sizeShow" class="btn btn-primary form-control margin">Load font size</button>
            <button style="display: none" class="btn btn-primary form-control margin" id="sizeHide">Hide font size</button>
            <select style="display: none" id="fontsizes1" class="form-control margin"></select>
            <button style="display: none" class="form-control margin btn btn-default" id="finishEdit">Done</button>
            <button class="form-control margin btn btn-default" id="startEdit">Edit</button>

var字体；
$（“#fonts1”）。关于（“更改”，函数（e）{
font=$（this.val（）；
e、 停止传播（）；
});
$（“#content-link2”）。在（“click”、“*”上，函数（e）{
$（this.css（'font-family'，font）；
e、 停止传播（）；
});
var font2；
$（“#googlefonts1”）。关于（“更改”，函数（）{
font2=$（this.val（）；
});
$（“#content-link2”）。在（“单击”，“*”，函数（）上）{
$（this.css（'font-family'，font2）；
});
var-fsize；
$（“#fontsizes1”）。关于（“更改”，函数（）{
fsize=$（this.val（）；
});
显色
隐藏颜色
加载字体
隐藏字体
谷歌字体
隐藏谷歌
加载字体大小
隐藏字体大小
多恩
编辑

有人知道如何解决这个问题吗？有人知道如何解决这个问题吗？