Javascript 防止双击引导图标时触发事件

我有一个标准卡，图标“加号”，点击后，它会变成图标“减号”，让用户看到内容 如果用户再次单击此图标“减号”，则内容将隐藏，图标“加号”将替换图标“减号”

请看这里：

它工作得很好，但问题是，至少在我的电脑（chrome 40）和手机（android/chrome）上，如果我真的快速点击两次（比如双击），所有内容都会被“卡住”，而不是在没有内容时看到“加”图标，我最终会看到我想要的相反的结果

例如，如果我快速双击“加号”图标，这就是我看到的内容（当“加号”图标可见时，我不应该看到“这是我的内容”）：

怎么办

我尝试使用和类似以下内容，但不起作用：

function debounce(fn, wait) {
  var timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
      fn.apply(this, arguments)
    }, (wait || 1));
  }
}

if (window.addEventListener) {
      // For all major browsers, except IE 8 and earlier
      window.addEventListener('resize', debounce(function () {
        console.log('clicked');        
        clickhere();
      }, 250));

function clickhere() {
  var list = $('.cards-list')
  $('li', list).click(function(e){ 
    var card=$(this);
    $(this).find(".glyphicon").toggleClass("glyphicon-   
  minus").toggleClass("glyphicon-plus");
  });
 }

当前代码：

HTML

<div id="operation-zone">
        <ul class="cards-list">

        <li class="card 354" data-opcode="CATIMINI26">

            <div class="card-content" id="accordion_354"> 

          <a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">

            <i class="glyphicon glyphicon-plus detail-icon_354"></i>
          </a>

          <div class="card-image card-lazy-preloader" id="accordion2">              
            <a href="/campaigns/xxxxx">
            </a><figure><a href="/campaigns/xxxxxx">   </a>         
                            <!-- responsive image -->
                            <img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">  
                        </figure>

                </div>



            </div> 

          <div id="collapseOne_354" class="one-column-info details panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">

              <div id="DivHomeOperationDescription_52850" class="description">
                  this is the content
              </div>

              <div class="card-info-actions">
                <a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now &gt;</a>
              </div>
          </div>



        </li>

                </ul>

CSS

 var list = $('.cards-list')
$('li', list).click(function(e){ 
  var card=$(this);
  $(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});

.cards-list {
    list-style: none;
    display: block;
    height: auto;
}
.card {
    text-align: left;
    width: 100%;
    border-bottom: 1px solid black;     
    position: relative;
}

.card-content {
    background: #fff;
    position: relative;
}
.card-image {
    vertical-align: top;
    img {
        width: 100%;
        height: 100%;
        position: absolute;
      top: 0;
      left: 0;
      color: green; 
    }
  position: relative;
  line-height: 0;
  overflow: hidden;
    padding-bottom: 33.88%;
}
.container .jumbotron {
  padding-left: 0px;
  padding-right: 0px;
}

.card-detail-opener {  
        color: green;
      font-size: 16px;
      text-align: center;
      padding-left: 1px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 27px;
      background: grey;
        position: absolute;
      z-index: 2;
      opacity: .75;
      filter: alpha(opacity=75);
      bottom: 60%;
      right: 30%;
        &:hover { background: #7E7E7E; }
        &:focus { background: #7E7E7E; }
    }

}

.card-detail-opener:link {
    color: green;

}
.glyphicon.glyphicon-remove {
    color: #333;
    &:hover { color: green; }
    &:focus {   color: green; }
}
.glyphicon.glyphicon-plus { 
     top:1px;
        color: #333;
        &:hover { color: #ffffff; }
        &:focus {   color: #ffffff; }

}
.glyphicon.glyphicon-minus {    
        top:2px;
        padding-right: 2px;//tweak to center
        color: #333;
        &:hover { color: #ffffff; }
        &:focus {   color: #ffffff; }

}


// Content of the card details in the 1-column view
.card .details {

        padding-top: 10px;
        background-color: rgba(255,255,255,1);

}
.details {
    padding-left: 1em;
}
.details .dates { 
    padding-top: 10px; 
    font-size: .8em;
  line-height: 1.6em;
  color: #464650;
  margin-right: 1em;
  background-size: 90px auto !important;
  background-repeat: no-repeat !important;
  background-position-x: right !important;
  background-position-y: 0px !important;    
  margin-bottom: 8px; 
}
.details .baseline {
    color: #888;
    font-size: 0.75em;
    line-height: 0.4em;
}
.details .description {
    font-size: .65em;
    color: #464650; 
    line-height: 1.1em;
    overflow: hidden;

}
// End of content of the card details in the 1-column view
.card-info-actions {
    float: right;
    padding: 0 5px 2px 0;
    clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
    font-size: 15px;
}

.card-short-info a.dateSales {
  color: #464650;
}
.info-overlay {
  display:none;
  z-index:999;
  position:absolute;
  height:100%;
  width: 100%;
  background-color: rgba(255,255,255,.9);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
  transition: all .4s ease-in-out;
  border-bottom: 4px solid green;
}

.close-overlay {
  float:right;
  padding:5px;
}

.info-overlay a {
    display: block;
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
}

由于这相当棘手，如果能与解决方案工作人员共享更新的JSFIDLE，我们将不胜感激

对于这种情况，我发现更好的解决方案是使用一个标志变量，当用户第一次单击时，

clicks

将为1，并且将创建

setTimeout

函数，并在触发click事件之前等待

700ms

如果在

700ms

delay（双击）之前检测到另一个单击，则第一个计时器将被清除，并且不会触发单击：

var list = $('.cards-list')
var clicks=0;
var timer=null;

$('li', list).on("click", function(e){
    clicks++;  //count clicks
    var card=$(this);

    if(clicks === 1) {
      //wait a while to check if the second click will be triggered
      timer = setTimeout(function() 
      {
        card.find(".glyphicon").toggleClass("glyphicon-minus")
            .toggleClass("glyphicon-plus");

        clicks = 0; //after action performed, reset counter
      }, 700);
    }
    else 
    {
      clearTimeout(timer);    //prevent single-click action
      clicks = 0;             //after action performed, reset counter
    }
})
.on("dblclick", function(e){
    e.preventDefault();  //cancel system double-click event
});

---

希望这会有所帮助。

一个简单的解决方案可能是使用

justClicked

变量（设置为

false

onload）来跟踪我们是在处理双击还是单击：

当单击到达时，在执行任何操作之前，请查看是否

justClicked===true

。如果是这样，您知道在最后一秒钟内发生了一次单击（见下文），您可以

e.preventDefault（）

并退出

如果上述检查通过，请设置

justClicked=true

，调用

setTimeout

以在1000ms内执行，然后继续使用标准的单击处理程序

在此期间到达的任何单击（

justClick

为

true

）都将无法通过步骤1中的检查，因此将被中止

在

setTimeout

回调中，设置

justClick=false

。该应用程序现在可以接收和处理新的点击

$（'#collapseOne_354'）。on（'show.bs.collapse'，function（）{
$（'#icon'）.removeClass（'glyphicon-plus'）.addClass（'glyphicon-plus'）；
});
$（'#collapseOne_354'）。on（'hide.bs.collapse'，function（）{
$（'#icon'）.removeClass（'glyphicon-minus'）.addClass（'glyphicon-plus'）；
});

或仅使用CSS：

<i class="glyphicon glyphicon-plus detail-icon_354"></i>

.card-detail-opener[aria-expanded=false] i:before {
  content: '\2b';
}
.card-detail-opener[aria-expanded=true] i:before {
  content: '\2212';
}

.card detail opener[aria expanded=false]i:之前{
内容：'\2b'；
}
.card detail opener[aria expanded=true]i:之前{
内容：'\2212'；
}

嗯 我尝试了不同的方法

$('#collapseOne_354').on("hidden.bs.collapse", function(e){
e.preventDefault();
 $(".cards-list").find(".glyphicon").removeClass("glyphicon-
minus").removeClass("glyphicon-plus");
  $(".cards-list").find(".glyphicon").addClass("glyphicon-plus");
});

$('#collapseOne_354').on("shown.bs.collapse", function(e){
 e.preventDefault();
 $(".cards-list").find(".glyphicon").removeClass("glyphicon-
plus").removeClass("glyphicon-minus");
 $(".cards-list").find(".glyphicon").addClass("glyphicon-minus");
});

---

请告诉我是否可以做任何改进。

尝试过，但同样的问题：如果我快速（双击）点击加号图标，我会遇到一些问题，也就是说，在看到“这是内容”时使用加号图标，我不应该看到，在这种情况下，纯css是否得到了很好的支持？是的，所有浏览器都支持它。在纯CSS技术中，你在HTML中做了哪些更改，我无法在我的应用程序中使用它。我可能遗漏了您在html中更改的内容。什么都没有，我甚至从您原来的JSFIDLE复制了html，它可以正常工作。也许你没有删除负责图标点击的JS代码？嗯，是的，我删除了，奇怪。现在它不再从+变为-（它在aria expanded=false上表示）。我必须检查我的代码中是否有错误。将在1后更新并更新投票。onClick和3。当点击到达时是相同的，那么要做什么呢。只有在

false

时才能继续。我在回答中改变了操作顺序，使之更清楚。

$('#collapseOne_354').on("hidden.bs.collapse", function(e){
e.preventDefault();
 $(".cards-list").find(".glyphicon").removeClass("glyphicon-
minus").removeClass("glyphicon-plus");
  $(".cards-list").find(".glyphicon").addClass("glyphicon-plus");
});

$('#collapseOne_354').on("shown.bs.collapse", function(e){
 e.preventDefault();
 $(".cards-list").find(".glyphicon").removeClass("glyphicon-
plus").removeClass("glyphicon-minus");
 $(".cards-list").find(".glyphicon").addClass("glyphicon-minus");
});