jquery - knockoutjs シングルおよびダブルクリック

Question

シングルおよびダブルクリックイベントをテキストのスパンにバインドできるようにしたいと考えています。私は私が使用できることを知っています

data-bind ="event: { dblclick: doSomething }

ダブルクリックの場合ですが、シングルクリックで別の機能を実行する機能も必要です。助言がありますか？

Answer 1

<div data-bind="singleClick: clicked, event : { dblclick: double }">
    Click Me
</div>

これにより、ダブルクリックでもあるシングルクリックが除外されます。

ko.bindingHandlers.singleClick= {
    init: function(element, valueAccessor) {
        var handler = valueAccessor(),
            delay = 200,
            clickTimeout = false;

        $(element).click(function() {
            if(clickTimeout !== false) {
                clearTimeout(clickTimeout);
                clickTimeout = false;
            } else {        
                clickTimeout = setTimeout(function() {
                    clickTimeout = false;
                    handler();
                }, delay);
            }
        });
    }
};

これがデモです。

Answer 2

まず、clickバインドはまったくお勧めしません。代わりに、jQueryのハンドラー"click"とハンドラーを使用する必要があります。"dblclick"

$(someParentElement).on('click', 'your span selector', function (event) {
    var myViewModelFragment = ko.dataFor(this);
    // your code here
});

$(someParentElement).on('dblclick', 'your span selector', function (event) {
    var myViewModelFragment = ko.dataFor(this);
    // your code here
});

編集：シングルクリックとダブルクリックの両方のサポートに関するニコの提案も参照してください。基本的に、クリック数を手動でカウントし、それに応じてさまざまな関数を呼び出す必要があります。jQuery がこれを処理してくれると思っていましたが、残念ながらそうではありません。

Answer 3

質問に対する私のプログラミングソリューションは次のとおりです。

var ViewModel = function() {
  var self = this;
  this.onSingleClick = function() {
    self.lastTimeClicked = undefined;
    console.log('Single click');
  };

  this.onDoubleClick = function() {
    console.log('Double click');
  };

  this.timeoutID = undefined;

  this.lastTimeClicked = undefined;
  this.clickDelay = 500;
  this.clickedParagraph = function(viewModel, mouseEvent) {
    var currentTime = new Date().getTime();
    var timeBetweenClicks = currentTime - (viewModel.lastTimeClicked || currentTime);
    var timeToReceiveSecondClick = viewModel.clickDelay - timeBetweenClicks;

    if (timeBetweenClicks > 0 && timeBetweenClicks < viewModel.clickDelay) {
      window.clearTimeout(viewModel.timeoutID); // Interrupt "onSingleClick"
      viewModel.lastTimeClicked = undefined;
      viewModel.onDoubleClick();
    } else {
      viewModel.lastTimeClicked = currentTime;
      viewModel.timeoutID = window.setTimeout(viewModel.onSingleClick, timeToReceiveSecondClick);
    }
  };
};

ko.applyBindings(new ViewModel(), document.getElementById("myParagraph"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<p id="myParagraph" data-bind="click: clickedParagraph">Click me</p>

すべての「ダブルクリック」は、2 回のシングルクリックから作成されます。「ダブルクリック」が発生した場合、最初のシングル クリックのイベント ハンドラが実行されないようにする必要があります (これがwindow.setTimeout&を使用する理由ですwindow.clearTimeout)。タイマーを設定するときは、要素の最初のクリックがすでにダブルクリックになっている可能性があることも考慮する必要があります。

私のコードでは、clickDelayを 500ms に設定しました。したがって、500ms 以内の 2 回のクリックは「ダブルクリック」として認識されます。この値を増やして、clickedParagraph関数の動作をテストすることもできます。