前端环境: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;
//自定义逻辑
}