小编Sco*_*ang的帖子

使用复选框+标签组合防止双击错误

请注意,此问题可能不适用于一般公众,因为除非您是快速点击者,否则不会发生此问题.(150-200ms /点击)我发布此问题的原因是因为我的应用程序有一个彼此相邻的20多个复选框的表单,经过大量研究后我发现没有相关的问题.

这是一个简化的场景 - 4个复选框和4个标签,每个复选框ID一个:

[CB1] Label 1
[CB2] Label 2
[CB3] Label 3
[CB4] Label 4
Run Code Online (Sandbox Code Playgroud)

假设在每种情况下都取消选中所有CB.

预期行为:

  1. 我快速连续点击4个CB,它们都将被检查.(真正)
  2. 我快速连续点击4个标签,并检查相应的CB.(仅适用于Chrome,但仍然不是最佳的)

Win 7上的案例2的实际行为(单击标签,因为如您所知,标签很大且可以样式化,并且复选框很小并且依赖于操作系统):

  1. (在Firefox 19中)CB2和CB4未被选中,在列表中,标签"Label"突出显示标签2和标签4,就好像我双击它们一样.
  2. (在Chrome浏览26)所有可转债得到正确检查,但同时会在列表中向下单词"标签"被突出了标签2和标签4,仿佛我对他们的双击.
  3. (在IE 10中)CB2和CB4未经检查,但没有错误突出显示.

如果点击位于同一元素上,则错误行为可能是合理的.在我们的例子中,这些显然是具有不同ID和名称的唯一复选框.所以结果非常出乎意料.

所以我的问题是:

当我快速点击不同的复选框时,有没有办法禁用触发双击事件,但仍然可以通过快速单击来检查它们?

我最接近的是以下脚本,有趣地使Firefox表现得像Chrome,而Chrome的行为就像Firefox:

jQuery(document).on('dblclick', 'input:checkbox+label', function(event){
    console.log('ugly hack fired');
    $(this).click();
    event.preventDefault();
})
Run Code Online (Sandbox Code Playgroud)

javascript css forms jquery

8
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

forms ×1

javascript ×1

jquery ×1