「クリック」jqueryのダブルクリックを防ぐ方法

私はこれを簡単にしましたplusグリフコンをクリックすると、グリフコンをminusグリフコンのクリックで表示し、グリフコンを「マイナス」に変更します。「クリック」jqueryのダブルクリックを防ぐ方法

しかし、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"); 
    }); 
});

出典

2017-02-28 Raviteja

を試してみてくださいはい、そうです。あなたはその質問から解決方法を試しましたか？ $（ "。glyphicon-plus"）。（クリック、関数（イベント）{ event.preventDefault（）; //何かを行う $（this）（グリフコンプラス）; ）; ）。 – CristiC

@CristiC、私は試しましたが、このケースでは動作しません。 - ボタンは+ボタンに戻りません。 –

@CristiCはあなたのフィドルを正しくチェックします。次のクリックのためにグリフコンを変更していません。また、重複を削除して、私は答えを得るでしょう。 – Raviteja

すぎ

$(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>

イベントハンドラを追加します

出典

2017-02-28 10:52:08

トリプルクリックでは機能しません。 –

@ Alexandru-IonutMihai、yes – Raviteja

はい。ダブルクリックイベントハンドラの最大数は利用可能です。 –

あなた自身のjqueryハンドラを使用してください。データトグルattrを削除してこれを使用する

私は今すぐ動作するはずです。

出典

2017-02-28 11:31:50

.glyphicon-plusの切り替えはあなたに –

この

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

出典

2017-02-28 11:54:18

「クリック」jqueryのダブルクリックを防ぐ方法

答えて

関連する問題