禁用input type为checkbox或radio时的click默认事件

最新推荐文章于 2024-08-17 16:33:18 发布

chunhazhan5688

最新推荐文章于 2024-08-17 16:33:18 发布

阅读量1.1k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/youruci/blog/351667

版权

当input元素的type为checkbox或radio时，浏览器会显示系统组件。如果在click事件中使用e.preventDefault()阻止默认事件，可能会导致状态更新不一致。问题在于，checkbox的click事件默认会生效选中状态的更改。即使通过JavaScript设置checked属性，没有默认事件，状态也会回退。了解这一行为对于正确处理这些类型的input元素至关重要。

摘要由CSDN通过智能技术生成

　在input中，如果type为checkbox或radio时，浏览器会将该input渲染成为系统的单选或多选组件，如果这时，我们在这个input上绑定click事件，那就要小心谨慎使用e.preventDefault()这个方法（jQuery中整合了这个方法使得它能够兼容去掉浏览器中的默认事件）。之所以要说谨慎使用，就是，如果你在这个事件的响应程序中判断该checkbox是否选中时，得到的结果和真正的选中状态会有所不同。下面先从一个简单的示例说明这个现象。（为了简单起见，我使用了jquery，他能节省选择器部分的代码，但不影响本文需要说明的问题）。代码段如下：

<script type="text/javascript">window.onload=function(){
    $('#chk').on('click',function(e){
        e.preventDefault();
        alert($(this).attr('checked'));
    });
}</script></head><body><input type="checkbox" id="chk" /></body>