Question

我需要在单击特定元素后禁用鼠标Click事件，这已经准备好了，但是现在我需要在几秒钟后启用它，或者专门通过Mouseleave事件启用它。我已经完成了示例，但无法正常工作，为什么会发生这种情况？

$(function(){

	var i = 0;
	
  // Click element
  $('#data').on('click', this, function(){
    i ++;
    $('#count').html(i);
    // Disable click
    $('#data').off('click');
    // After a while, we enable the click again
    setTimeout(function(){
      $('#data').on('click');
    }, 2000);
  });

	// Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, function(){
    $('#data').on('click');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">Hello <span id="count"></span></div>

Answer 1

最简单的方法是：从div更改为button，然后使用disabled。
为什么不使用div？
在这种情况下，具有属性<div>的{{1}}不会有任何区别...

禁用了disabled的用户将无法点击，因此请放开时间，并使用您的<button>的想法再次启用它

如果使用setTimeout()，

mouseleave将不起作用，因为已禁用的按钮的disabled设置为none（至少在Chrome中是这样），因此无法识别mouse events都不是mouseenter ...

mouseleave

$(function(){

  var i = 0;
  $('#data').on('click', this, function(){
    i++;
    $('#count').html(i);
    $('#data').prop('disabled', true);
    
    setTimeout(function(){
      $('#data').prop('disabled', false);
      console.log("#data is clickable again");
    }, 1000);
  });
  
});

#data{
  margin: 8px;
  padding: 6px;
}

您可以继续使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="data">Hello <span id="count"></span></button>的方法，但这不是最好的主意，因为您每次都需要重新创建点击监听器。

Answer 2

您尝试禁用属性吗？如果您只是想禁用和启用。.

如果要使用onClick，则必须将onclick操作包装在单独的函数中并将该函数绑定到该函数。

$(function(){

	var i = 0;
	
  // Click element
  $('#data').on('click', this, function(){
    i ++;
    $('#count').html(i);
    // Disable click
    $('#data').attr('disabled','disabled');
    // After a while, we enable the click again
    setTimeout(function(){
      $('#data').removeAttr('disabled');
    }, 2000);
  });

	// Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, function(){
    $('#data').removeAttr('disabled');
  });

});

Answer 3

有两件事，您需要阻止默认的点击事件，并在需要时触发点击。看起来像这样（未在浏览器中进行测试，因此可能不是100％）

$(function(){
  var i = 0;

    function triggerClick(selector) {
      return function() {
        $(selector).trigger("click")
      }
    }

  $('#data').on('click', this, function(event){
    // stop the click
    event.preventDefault();

    i ++;
    $('#count').html(i);

    setTimeout(triggerClick('#data'), 2000);
  });

    // Or enable the click when we make a leavemouse
  $('#data').on('mouseleave', this, triggerClick('#data'));
});

您需要弄清楚的是如何防止再次调用该事件。像这样，超时触发，然后它们离开。可能的处理方式是将i的值发送到triggerClick，如果当前的i高于传入的一个或不触发，则不触发（因此，您必须在被解雇的情况下保留此状态的内部状态图）

在jQuery中启用和禁用鼠标单击事件

3 个答案: