iCheck控件ifClicked和ifChanged事件的讨论

假装没事ソ 提交于 2019-11-30 18:10:19

前端环境:Jquery+Bootstrap,checkbox使用了iCheck

关于iCheck控件点击事件的处理,其中有两个相关事件ifClicked和ifChanged
经过实验发现,ifClicked是点击的时候触发,此时check状态还没变化
ifChanged是状态变化后触发。
也就是说,当点击checkbox的时候,触发顺序是:

ifClicked事件-->checkbox check状态变化-->ifChanged事件

如果有其他逻辑触发iCheck的.iCheck('check')和.iCheck('uncheck'),改变状态时,会直接触发ifChanged事件,不会触发ifClicked。
(备注:看网上也有人提出ifChanged事件在check状态变化之前触发(讨论链接:https://bbs.csdn.net/topics/391953382),我也不知道是怎么回事。这是我自己测试的结果,而且从ifChanged这个事件命名来看,也应该是在状态变化之后来触发的。)

假如我们需要某些关联操作,需要明确指定点击的时候才要触发某些事件(而不是状态变化的时候触发),但是点击的时候check状态又没有发生变化,此时获取状态是错误的。

上面提到的帖子里提到用setTimeout定时器人为模拟一个异步操作的方法。这个方法,也有弊端,时间间隔设定要恰当,否则点击速度太快,两次点击时间间隔小于设定的时间间隔,会出现状态异常。

帖子里还有一个方案:

self.on("ifClicked", function (ent) {
                    if($(self).is(":checked"))
                        //现在判断时若是选中的,点击完了就变成了未选中了
                    else
                        //这里判断是没选中,点击完了就变成选中了
})

这种方法适用于checkbox单独一个使用,一般的checkbox都是好多放在一个组里,此种方法判断就有点麻烦了。

我这里提出另外一个方法。使用ifClicked和ifChanged联合解决:
设定一个bool变量:iCheckBoxClickFlag记录是否被点击
当被点击的时候,触发ifClicked事件,iCheckBoxClickFlag设定为true
当触发ifChanged事件的时候,再根据iCheckBoxClickFlag的状态,判断是否是点击事件过来的。假如是,就执行自定义逻辑

//iCheckBox是否被点击
var iCheckBoxClickFlag = false;

//处理ifClicked
$("input:checkbox[name='city_cb']").on('ifClicked', function(event){
    console.log('checkbox click');
    iCheckBoxClickFlag=true;
});

//处理ifChanged
$("input:checkbox[name='city_cb']").on("ifChanged",function(){ 
    console.log('checkbox changed...');
    if(!iCheckBoxClickFlag){
        return;
    }
    iCheckBoxClickFlag = false;
    //自定义逻辑
}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!