knockoutjs單並雙擊

Question

我希望能夠以一個單一的和雙擊事件綁定到文本的跨度。我知道我可以使用

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

的雙擊，但我還需要在單一的點擊執行不同的功能的能力。有什麼建議麼？

Answer 1

首先，我不會推薦click約束力可言。相反，你應該使用"click"和"dblclick"處理從jQuery的：

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

編輯：又見Niko's suggestion關於支持單，雙點擊。基本上，you should count the number of clicks manually並相應地調用不同的功能。我認爲jQuery爲你處理這個，但不幸的是，它沒有。

Answer 2

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

Here是一個演示。

Answer 3

@madcapnmckay提供了極大的答案， 下面是使用了同樣的想法，提供雙擊修改後的版本。通過使用最新版本的knockout，vm會作爲上下文傳遞給處理程序。這可以在單擊時同時工作。

<div data-bind="doubleClick: clicked"> 
    Double click Me 
</div> 

-

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

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

Answer 4

以上的答案是非常有益的，但並沒有給出確切的解決方案，我相信OP是後：一個簡單的淘汰賽綁定允許獨家單並雙擊事件。我知道後是一年前，但我發現這篇文章的時候看今天做同樣的事情，所以我的情況下，發佈這個答案是對別人有用。

下面的例子似乎適合的有機磷要求，可以節省一些某人時間（聲明：有限的跨瀏覽器測試）。的jsfiddle：http://jsfiddle.net/UxRNy/

此外，有在你身邊是否應該首先使用這個問題（移動瀏覽器，減慢頁面，可訪問性等） - 但那是另一篇文章（如https://ux.stackexchange.com/questions/7400/should-double-click-be-avoided-in-web-applications）

實施例視圖用法：

<div data-bind="singleOrDoubleClick: { click: singleClick, dblclick: doubleClick }"> 
    Click or double click me... 
</div> 

裝訂：

ko.bindingHandlers.singleOrDoubleClick= { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var singleHandler = valueAccessor().click, 
      doubleHandler = valueAccessor().dblclick, 
      delay   = valueAccessor().delay || 200, 
      clicks   = 0; 

     $(element).click(function(event) { 
      clicks++; 
      if (clicks === 1) { 
       setTimeout(function() { 
        if(clicks === 1) { 
         // Call the single click handler - passing viewModel as this 'this' object 
         // you may want to pass 'this' explicitly 
         if (singleHandler !== undefined) { 
          singleHandler.call(viewModel, bindingContext.$data, event); 
         } 
        } else { 
         // Call the double click handler - passing viewModel as this 'this' object 
         // you may want to pass 'this' explicitly 
         if (doubleHandler !== undefined) { 
          doubleHandler.call(viewModel, bindingContext.$data, event); 
         } 
        } 
        clicks = 0; 
       }, delay); 
      } 
     }); 
    } 
}; 

以上是從一個組合放在一起上述兩例和示例從這裏：https://gist.github.com/ncr/399624 - 我只是合併了兩種解決方案。

Answer 5

這裏是我的編程解決的問題：

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>

每一個 「雙擊」 是由兩個單點擊創建。如果有「雙擊」，我們必須確保第一次單擊的事件處理程序沒有得到執行（這就是爲什麼我使用window.setTimeout & window.clearTimeout）。設置定時器時，我們也必須考慮到第一次點擊某個元素可能已經是雙擊。

在我的代碼設置clickDelay到500毫秒。因此，500ms內的兩次點擊被視爲「雙擊」。您也可以增加此值來測試我的clickedParagraph函數的行爲。