knockoutjs单击和双击

我希望能够将单击和双击事件绑定到一段文本。 我知道我可以用

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

双击，但我还需要能够单击执行不同的function。 有什么建议？

Answer 1

首先，我不建议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 }); 

编辑：另请参阅Niko关于支持单击和双击的建议 。 基本上， 您应该手动计算点击次数并相应地调用不同的function。 我假设jQuery会为你处理这个，但不幸的是，它没有。

Answer 2

 
 Click Me  

这将过滤掉也是双击的单击。

 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 3

上面的答案非常有用，但没有给出我认为OP之后的确切解决方案：一个简单的Knockout绑定，允许独占的单击和双击事件。 我知道这篇文章是一年前发布的，但我今天在找同样的事情时发现了这篇文章，所以如果这个答案对其他人有用的话我会张贴。

以下示例似乎符合OP的要求，可能会节省一些时间（免责声明：有限的跨浏览器测试）。 JSFiddle： http ： //jsfiddle.net/UxRNy/

此外，还有一些问题，你是否应该首先使用它（移动浏览器，减慢页面，可访问性等） – 但这是另一篇文章（例如https://ux.stackexchange.com/questions/7400 /应该双击 – 在网络应用程序中避免

示例视图用法：

 
 Click or double click me...  

捆绑：

 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 4

@madcapnmckay提供了一个很好的答案，下面是一个使用相同想法提供双击的修改版本。 通过使用最新版本的knockout，vm作为上下文传递给handler。 这可以通过单击同时工作。

 
 Double click Me  

–

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

  
Click me