如何防止双击“单击”jquery答案

【问题标题】：How to prevent double click of "click" jquery如何防止双击“单击”jquery
【发布时间】：2017-07-19 06:55:44
【问题描述】：

我有这个简单的Fiddle，如果用户点击plus glyphicon，我会显示折叠的内容并将glyphicon 更改为“减号”，反之亦然点击minus glyphicon。

但是，当我双击plus 字形图标时，内容显示并且字形图标没有更改为minus。对于下一次单击，内容会在出现“减号”字形图标时显示。如何防止双击？

HTML

<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

jQuery

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});

【问题讨论】：

是的。您是如何尝试解决该问题的？ $(document).ready(function () { $(".glyphicon-plus").one('click', function (event) { event.preventDefault(); //做一些事情 $(this).parent(" div").find(".glyphicon-plus") .toggleClass("glyphicon-minus"); }); });
@CristiC ，我试过了，但不适用于这种情况。 - 按钮不会变回 + 按钮
@CristiC 正确检查您的小提琴，它不会更改下次点击的字形图标。另外，删除重复项，以便我得到答案。
@CristiC 在你的小提琴中，它不起作用
@Raviteja 我添加了一个答案。检查一下

标签： javascript jquery html twitter-bootstrap glyphicons

【解决方案1】：

也添加 dblclick 事件处理程序

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
    $('.glyphicon-plus').dblclick(function () {
        $(this).parent("div").find(".glyphicon-plus")
            .toggleClass("glyphicon-minus");
    });
});

.divcontainer{
     background:aqua;
     width:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-plus" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

【讨论】：

@Alexandru-IonutMihai，是的
是的。但是最多可以使用双击事件处理程序

【解决方案2】：

只需使用您自己的 jquery 处理程序。删除 data-toggle attr 并使用它

$(document).ready(function () {
    $('.glyphicon-plus').click(function () {
     $('.collapse').slideToggle();
     $(this).parent("div").find(".glyphicon").toggleClass("glyphicon-plus").toggleClass("glyphicon-minus");
    });
});

我认为它现在应该可以工作了。

【讨论】：

切换 .glyphicon-plus 在你身上

【解决方案3】：

试试这个

$(this).prop('disabled', true);

【讨论】：

【解决方案4】：

使用折叠隐藏和显示事件代替“onclick”功能。请参考以下代码：

$(document).ready(function() {
  $('#collapsecontent').on('show.bs.collapse', function(args) {
    onContainerClick($(this).parent());
  });

  $('#collapsecontent').on('hide.bs.collapse', function(args) {
    onContainerClick($(this).parent());
  });
});

function onContainerClick(args) {
  $(args).find(".glyphicon-plus")
    .toggleClass("glyphicon-minus");
}

【讨论】：