关于JQ对checkbox的click事件触发的一个坑

今天插件里的遇到一个坑困扰我很久,写了一个键盘事件触发input的click事件来改变选项值,一直不正确,测试了好久终于发先问题出在input点击时改变checked和执行click事件的顺序上。写一个小demo。分别用jq和js来使cs2/cs4来分别触发cs1/cs3的click事件。

html:写两个多选框




初始状态:

关于JQ对checkbox的click事件触发的一个坑_第1张图片

1,2用jQ写法

$("#cs1").click(function(){
    alert(this.checked);

});

$("#cs2").click(function(){
    $("#cs1").click();//或者$("#cs1").trigger('click');

});

3,4用原生的方法来绑定结果就不一样了

document.getElementById('cs3').onclick = function ( ) {   alert(this.checked) }
document.getElementById('cs4').οnclick=function(){ document.getElementById('cs3').click()  };


分别点击cs1,和cs3显示结果为均true,点击确定后cs1,cs3的状态均为选中,这个JQ和js没区别

关于JQ对checkbox的click事件触发的一个坑_第2张图片关于JQ对checkbox的click事件触发的一个坑_第3张图片

然后刷新页面,再来点击cs2 和cs4看看

关于JQ对checkbox的click事件触发的一个坑_第4张图片关于JQ对checkbox的click事件触发的一个坑_第5张图片

jq的是先执行函数将cs1的checked属性弹出啊,点击确定关闭弹窗后cs1的状态才变为被选中,而js写法的的依然是先变为选中的状态再执行弹窗函数。

这个实验表明,jq中使用事件触发中获取的checked值是不准确的。通过click()和trigger方法来触发的事件顺序都是先执行绑定的事件在实现原生选中的效果

你可能感兴趣的:(原创文章,JavaScript)