雙擊引導圖標可防止事件觸發

Question

我有一個帶有圖標“加號”的標准卡，單擊該圖標后，該圖標就變成圖標“減號”，並讓用戶看到內容。如果用戶再次單擊此圖標“減號”，則內容將被隱藏，而圖標“加號”將替換圖標“減去”。

看到這里： https : //jsfiddle.net/DTcHh/22354/

它可以正常工作，但問題是至少在我的計算機（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>

JS

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

CSS

.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;
}

因為這很棘手，所以不妨與解決方案一起分享更新的jsfiddle

Answer 1

一個簡單的解決方案可能是使用justClicked變量（設置為false onload）來跟蹤我們正在處理雙擊還是單擊：

1. 點擊到達后，在執行任何操作之前，請查看justClicked===true 。 如果是這樣，您就知道在最后一秒鍾內發生了一次單擊（請參見下文），您可以e.preventDefault()並退出。
2. 如果通過了上述檢查，請設置justClicked=true ，調用setTimeout在1000ms內執行，然后繼續使用您的標准點擊處理程序。
3. 在此期間到達的任何點擊（ justClick為true ）都將無法通過步驟1中的檢查，因此被中止。
4. 在setTimeout回調中，設置justClick=false 。 該應用現在可以接收和處理新的點擊了。

Answer 2

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

$('#collapseOne_354').on('show.bs.collapse', function() {
  $('#icon').removeClass('glyphicon-plus').addClass('glyphicon-minus');
});
$('#collapseOne_354').on('hide.bs.collapse', function() {
  $('#icon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});

的jsfiddle

或僅使用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';
}

的jsfiddle

Answer 3

工作提琴 。

對於這種情況，我發現更好的解決方案是使用標志變量，當用戶首次單擊時， clicks將為1，並且將創建setTimeout函數，並在觸發click事件之前等待700ms 。

如果在700ms延遲之前檢測到另一次點擊（雙擊的情況下），則將清除第一個計時器，並且不會觸發該點擊：

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
});

希望這會有所幫助。

Answer 4

好的，我嘗試了另一種方法。

$('#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");
});

請讓我知道是否可以進行任何改進。