将复选框切换功能从单击更改为触摸启动

Question

我正在开发一个科尔多瓦应用程序。由于点击事件有 300 毫秒的延迟，我不想使用它。如何更改 <input type='checkbox'> 元素侦听的事件以将其复选标记从 click 切换为例如touchstart?

我最接近的是选中复选框 disabled 并添加此代码：

$(':checkbox').each(function(){
        $(this).bind('touchstart', function(){
            if(this.checked) {
                this.checked = true;
            } else {
                this.checked = false;
            }
        })
    });

遗憾的是 touchstart 没有触发。

Answer 1

您可以使用此代码

   document.querySelector("#idofelement").addEventListener("touchend", function() {


    }

Answer 2

使用该代码复选框事件将被调用两次。首先 touchstart 事件将被调用，然后在 300ms 延迟后单击事件将调用真实事件复选框。让我们试试这个代码

$(':checkbox').each(function(){
    $(this).bind('touchstart', function(){
        if(this.checked) {
            this.checked = true;
        } else {
            this.checked = false;
        }
    }).bind('click', function(e) {
        e.preventDefault();
    });
});

Answer 3

首先，我需要在捕获的事件上调用 preventDefault()。

另一个问题是，checked 不是实际的 jquery 属性复选框，我需要使用 prop()

所以最终起作用的是：

$('.divClassContainingCheckbox').each(function(){
    $(this).bind('touchstart', function(e){
        e.preventDefault();  // prevents click from triggering check
        checkbox = $(this).find(':checkbox');
        if(checkbox.is(":checked")) {
            checkbox.prop('checked', false);
        } else {
            checkbox.prop('checked', true);
        }
    })
});

HTML:

<div class='divClassContainingCheckbox'>
    <input type='checkbox' />
</div>

Answer 4

这个函数对我有用，我得到了复选框标签的属性，然后我以编程方式检查了输入类型复选框

function checkedCheckbox() {  
  var id = $(this).attr('for');  
  var element = $('#'+id);
  var isChecked = element.prop("checked");

  if(isChecked) {
    $(element).attr("checked", false);
  } else {
    $(element).prop('checked', true);
  }
}

将复选框切换功能从单击更改为触摸启动

Change checkbox toggle function from click to touchstart

checkbox

touchstart

cordova