Question

我试图禁用图像上的单击事件3秒钟，但似乎无法将其绑定回去。我添加了完整代码的详细片段以对其进行测试。当我单击图像时，脚本似乎跳过了计时器，如果我在函数中添加CopyToClipboard来单击，它会挂起。

function CopyToClipboard(val) {
  $(".tooltipx").append('<span class="tooltiptextx" id="myTooltip">Key Coppied</span>');
  $('#myTooltip').fadeIn('fast').delay(2000).fadeOut('fast');
  var hiddenClipboard = $('#_hiddenClipboard_');
  if (!hiddenClipboard.length) {
    $('body').append('<textarea style="position:absolute;top: -9999px;" id="_hiddenClipboard_"></textarea>');
    hiddenClipboard = $('#_hiddenClipboard_');
  }
  hiddenClipboard.html(val);
  hiddenClipboard.select();
  document.execCommand('copy');
  document.getSelection().removeAllRanges();
}

$(function() {
  $('[data-clipboard-text]').each(function() {
    $(this).click(function() {
      CopyToClipboard($(this).data('clipboard-text'));
      $(this).off('click', function() {});
      setTimeout(function() {
        $(this).on('click', function() {});
      }, 5000);

    });
  });
});

background-color:#333;
color:#fff;
font-family:'Open Sans';

}
.container {
  margin: 150px auto;
  max-width: 640px;
}
h4 {
  margin: 20px auto;
  font-size: 14px;
}
.tooltipx {
  position: relative;
  display: inline-block;
}
.tooltipx .tooltiptextx {
  display: none;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  margin-left: -75px;
}
.tooltipx .tooltiptextx::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous" />

<div class="container">
  <h1>jQuery Copy to Clipboard</h1>
  <div class="tooltipx">
    <img src="https://i.imgur.com/B7Yv520t.jpg" height="200" data-clipboard-text="Text to be copied" />
  </div>
  <h4>Paste here:</h4>
  <input type="text" class="form-control" />
</div>

Answer 1

我会使用disabled以便不会一次又一次触摸点击处理程序：

$(function () {
  $("button").click(function () {
    $this = $(this);
    // Do something for the button.
    console.log("You have clicked me. So wait for 3 seconds.");
    // After doing something, disable.
    $this.prop("disabled", true);
    
    setTimeout(function () {
      console.log("Now you can click me again.");
      $this.prop("disabled", false);
    }, 3000);
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<button>Click Me</button> and you can't for 3 seconds.

以防万一，如果您没有在具有disabled属性的按钮上使用此按钮，我将使用类，并基于该类，在点击处理程序中将其禁用和启用。如果元素具有disabled类，则不会使它通过使用return false来执行功能。在超时的时候，我将删除该类。

$(function () {
  $("a").click(function (e) {
    e.preventDefault();
    if ($(this).hasClass("disabled"))
      return false;
    $this = $(this);
    // Do something for the button.
    console.log("You have clicked me. So wait for 3 seconds.");
    // After doing something, disable.
    $this.addClass("disabled");
    
    setTimeout(function () {
      console.log("Now you can click me again.");
      $this.removeClass("disabled");
    }, 3000);
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<a href="#">Click Me</a> and you can't for 3 seconds.

Answer 2

在您的示例中看不到HTML代码，因此我创建了HTML和JS代码示例。

HTML：

<html>
  <head>    
  </head>
  <body>
<div>
  <button id="btnTest"> Test </button>
</div>
  <body>
</html>

Js代码：

$(document).ready(function(){ 
  $('#btnTest').click(handleClick);
});

function handleClick()
{
     $(this).off('click');

    setTimeout(x => {
      $('#btnTest').on('click', handleClick);
    }, 3000);
}

请告知它是否适合您！

jQuery 3秒后打开/关闭点击

2 个答案: