代码之家 › 专栏 › 技术社区 › jiwopene

鼠标按下时复选框,鼠标按下时取消复选框

jquery-events preventdefault checkbox jquery javascript

jiwopene · 技术社区 · 6 年前

我正在制作jQuery应用程序,其中有一个复选框,只有在按下鼠标/按键/触摸时才会选中。选中鼠标向下,取消选中鼠标向上。

event.preventDefault() ,如果鼠标按钮未按下,则复选框保持选中状态,但空格键工作正常。

$(function() {
  var cb = $("input");
  cb
    .on("mousedown keydown", function(event) {
      event.preventDefault();
      cb.prop("checked", true);
    })
    .on("mouseup keyup", function(event) {
      event.preventDefault();
      cb.prop("checked", false);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=checkbox autofocus>

我知道上面的代码需要一些工作才能在任何情况下正常工作(触摸等),但它只是为了测试目的而编写的

1 回复 | 直到 6 年前

Rory McCrossan Hsm Sharique Hasan 6 年前

这个问题是因为 click 事件在 mouseup 在复选框上释放,这将强制 checked 财产 true . 要修复此挂钩,请向 点击 只要打个电话 preventDefault() 在上面。

还请注意,您可以向 on() 它由要挂接的事件名称(而不是调用)设置键 关于() 多次:

$(function() {
  var $cb = $("input");
  $cb.on({
    "mousedown keydown": function(e) {
      e.preventDefault();
      $cb.prop("checked", true);
    },
    "mouseup keyup": function(e) {
      e.preventDefault();
      $cb.prop("checked", false);
    },
    'click': function(e) {
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type=checkbox autofocus>

或者,正如@enapupe在评论中指出的,您可以删除事件处理程序,并让默认 点击

$(function() {
  var $cb = $("input");
  $cb.on({
    "mousedown keydown": function(e) {
      e.preventDefault();
      $cb.prop("checked", true);
    }
  });
});

<脚本src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></脚本>

这两种方法都能奏效,这取决于你想采取什么样的行为来抑制压力 点击 事件

推荐文章

Mickey Vershbow · 无法获取复选框的“checked”属性

2 年前

XAZG ÐÐµÐ¸Ð·Ð²ÐµÑÑÐ½ÑÐ¹ · 如何在for js之后重置字符串变量

3 年前

SãOãNã JãOãã · Google sheets复选标记条件格式化

3 年前

Ranjith Raina · 在jquery中,可以将所有复选框值转换为逗号分隔的字符串

3 年前

Alex · 引导对齐表单开关左侧的标签

3 年前

Khilen Maniyar · 角度2:带有复选框的阵列工作不正常

6 年前

Yash Saraiya · jQuery datatable:在每个分页上启用几个文本框

6 年前

Kais · 带有输入复选框的表格选中/取消选中

6 年前

Silu K · 单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

6 年前

yuggmeister · 如何使自定义复选框可访问?

6 年前