Question

我有一个带有超链接的简单HTML页面。该链接完美地运行并执行jQuery函数。我会发出警告说“现在”。

问题在于，当用户双击链接时，它将执行两次jQuery代码并将“立即”警报两次显示。当我下次单击链接一次时，它将执行两次或更多次jQuery代码，我将收到几个“现在”警报。

我应该如何修改代码以防止jQuery代码执行多次？

以下是HTML代码：

<a href="#" class="editing" data-match="1" data-place="1" data-selected="20" data-checking="area">Use</a>

这是我的jQuery代码：

jQuery(document).on('click', '.editing', function(e) {
  e.preventDefault();

  var $this = $(this),
      match = $this.data('match'),
      place = $this.data('place'),
      selected = $this.data('selected'),
      checking = $this.data('checking');

  jQuery.post("myownpage.php", {
    match: match,
    place: place,
    selected: selected,
    checking: checking
  }).done(function(data) {
    alert('Now');
    $('html').css({ 'overflow': 'auto', 'height': 'auto' });
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none');
  });
});

Answer 1

使用jQuery.one，它只执行一次事件处理程序。像这样 -

$(document).one('click', eventHandler)

另一种方法是在完成工作后将处理程序引用重写为空处理程序，如下所示 -

var eventHandler = function(e) {

// point eventHandler to a do nothing function
eventHandler = function(){ return false;};

e.preventDefault();

var $this = $(this),
    match = $this.data('match'),
    place = $this.data('place'),
    selected = $this.data('selected'),
    checking = $this.data('checking');

jQuery.post("myownpage.php", {
  match: match,
  place: place,
  selected: selected,
  checking: checking
}).done(function(data) {
  alert('Now');
  $('html').css({ 'overflow': 'auto', 'height': 'auto' });
  $this.parent().parent().parent().parent().parent().parent().css('display', 'none');
});
};

jQuery(document).on('click', '.editing', eventHandler);

或者您可以使用off方法删除侦听器，而不是将引用重新分配给无操作函数。

Answer 2

您可以使用外部作用域变量（此处为eventComplete）来了解事件是否完整

var eventComplete = true;
 jQuery(document).on('click', '.editing', function(e) {
  e.preventDefault();
  if( eventComplete ) {
      eventComplete = false;
      var $this = $(this),
        match = $this.data('match'),
        place = $this.data('place'),
        selected = $this.data('selected'),
        checking = $this.data('checking');

      jQuery.post("myownpage.php", {
        match: match,
        place: place,
        selected: selected,
        checking: checking
      }).done(function(data) {
        alert('Now');
        $('html').css({ 'overflow': 'auto', 'height': 'auto' });
  $this.parent().parent().parent().parent().parent().parent().css('display', 'none');
       eventComplete = true;
     });
  }
});

Answer 3

检查一些increment。如果下次c=1 {@ 1}}，如果条件不允许c=2

，请点击1

var c=0;
jQuery(document).on('click', '.editing', function(e) {
  e.preventDefault();
  c ++;
if(c > 1)
{
  var $this = $(this),
      match = $this.data('match'),
      place = $this.data('place'),
      selected = $this.data('selected'),
      checking = $this.data('checking');

  jQuery.post("myownpage.php", {
    match: match,
    place: place,
    selected: selected,
    checking: checking
  }).done(function(data) {
    alert('Now');
    $('html').css({ 'overflow': 'auto', 'height': 'auto' });
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none');
  });
  }
});

Answer 4

您可以在同一个函数中绑定多个event。您可以设置相同的函数dblclick，这样它就会运行一次..

jQuery(document).on('click dblclick', '.editing', function(e) {
  e.preventDefault();

  var $this = $(this),
      match = $this.data('match'),
      place = $this.data('place'),
      selected = $this.data('selected'),
      checking = $this.data('checking');

  jQuery.post("myownpage.php", {
    match: match,
    place: place,
    selected: selected,
    checking: checking
  }).done(function(data) {
    alert('Now');
    $('html').css({ 'overflow': 'auto', 'height': 'auto' });
    $this.parent().parent().parent().parent().parent().parent().css('display', 'none');
  });
});

Answer 5

检查此示例。它单独输出单击和双击。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Title of the document</title>
</head>

<body>
<div class="div">My Div</div>
<script type="text/javascript">
var flag = false;
var time;

$(document).on("dblclick", ".div", function(e) {
    flag = true;
    alert("Double Clicked");
 });

 $(".div").on("click",function(e) {

    time = setTimeout(function(){
        var x =checkSingleClick();
        console.log(x);
        if(x){
            alert("Single Clicked"); 
        }else{
            flag = false;  
        }  
    clearTimeout(time);        
    },350);

 });

 function checkSingleClick(){
        if(flag == false){
            return true;
        }else{
            return false;
        }
 }

</script>
</body>

</html>

当双击超链接时，jQuery并阻止函数执行两次

5 个答案: