单击后立即删除单击事件处理程序

Remove click event handler immediately after click

本文关键字：单击 事件处理 程序 删除      更新时间：2023-09-26

我一直在尝试删除点击事件处理程序后被点击一次，以防止事件多次触发。

我试过.unbind(), .off(), .one()，并把每个在不同的地方在功能，但似乎没有工作。

如果我使用.off()，我得到undefined is not a function错误。

如果我使用.one()，我想基本上打开事件，如果我点击另一个按钮。如果我点击选择，我想让它只触发一次，但如果我点击取消选择，我想让选择再次被点击。

我试过这样做，但奇怪的是代码甚至没有触发，所以我被迫使用click()。

$().on('click', function()...

我应该使用哪个函数，我应该把它放在哪里?

(function($) {
Drupal.behaviors.wysiwyg = {
    attach: function(context, settings) {
        var toggle = function(state) {
            $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
        }
        $('#wysiwyg-select-all').click(function(){
    toggle(true);
            return false;
        });
        $('#wysiwyg-unselect-all').click(function(){
    toggle(false);
            return false;
        });
    }
}
}(jQuery))

检查这是否适用于您。同时要确保jquery的版本在1.7以上，才能让"on"， "off"正常工作。

(function($) {
  Drupal.behaviors.wysiwyg = {
    attach: function(context, settings) {
    var counter = 0;
      var toggle = function(state) {
        $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
      }
      $(document).off('click',"#wysiwyg-select-all").on('click', "#wysiwyg-select-all", function(e) {
        toggle(true);               
        return false;
      });
      $(document).off('click',"#wysiwyg-unselect-all").on('click', "#wysiwyg-unselect-all", function(e) {
        toggle(false);      
        return false;
      });
    }
  }
}(jQuery))

已更新

我把其他人建议的一些事情弄得一团糟，我认为这正是你需要完成的:

(function ($) {
    Drupal.behaviors.wysiwyg = {
        attach: function (context, settings) {
            var selectFn = function() {
                toggle(true);
                return false;
            }
            var unselectFn = function() {
                toggle(false);
                return false;
            }    
            var toggle = function (state) {
                $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
                if (state) {
                    $(document).off("click", '#wysiwyg-select-all,#wysiwyg-unselect-all', "**");
                    $(document).on("click", "#wysiwyg-unselect-all", unselectFn;
                }else{
                    $(document).off("click", '#wysiwyg-select-all,#wysiwyg-unselect-all', "**");
                    $(document).on("click", "#wysiwyg-select-all", selectFn;
                }
            };
            $(document).on("click", "#wysiwyg-select-all", selectFn);
            $(document).on("click", "#wysiwyg-unselect-all", unselectFn);
        }
    };
}(jQuery));

它切换按钮事件的绑定，并将与动态创建的元素一起工作。这是Matt Green的答案的衍生物，但我注意到他的几个问题，即他在事件绑定中调用selectFn和unselectFn，而不是引用它们。

像这样:

$("#wysiwyg-select-all").one("click", function() {
    toggle(true);
    return false;
});

为click按钮添加一个类名，然后在点击一次后删除该类。

$('#wysiwyg-select-all .myclassname').on('click', function(){
    toggle(true);
    $(this).removeClass('myclassname');
    $('#wysiwyg-unselect-all').addClass('secondclassname');
    return false;
});
$('#wysiwyg-unselect-all .secondclassname').on('click', function(){
    toggle(false);
    $('#wysiwyg-select-all').addClass('myclassname');
    $(this).removeClass('secondclassname');
    return false;
});

为什么不使用任何全局变量作为标志呢?点击事件设置为true 

if (btn1Clicked)
     return;
btn1Clicked=true;

要重新启用，只需将其设置为false。如果需要，可以使用return false而不是return。

这应该适用于动态创建的元素:

(function ($) {
    Drupal.behaviors.wysiwyg = {
        attach: function (context, settings) {
            var toggle = function (state) {
                $('#wysiwyg-profile-form .buttons-and-plugins input:checkbox').attr('checked', state);
            };
            $(document).on("click", "#wysiwyg-select-all", selectFn());
            $(document).on("click", "#wysiwyg-unselect-all", unselectFn());
        }
    };
}(jQuery));

function selectFn() {
    $(document).off("click", '#wysiwyg-select-all', "**");
    $(document).on("click", "#wysiwyg-unselect-all", unselectFn());
    toggle(true);
    return false;
}
function unselectFn() {
    $(document).off("click", '#wysiwyg-unselect-all', "**");
    $(document).on("click", "#wysiwyg-select-all", selectFn());
    toggle(false);
    return false;
}
相关文章：