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

Here是一个演示。

Answer 2

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

以下示例似乎符合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 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

首先，我不建议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's suggestion有关支持单击和双击的信息。基本上，you should count the number of clicks manually并相应地调用不同的函数。我假设jQuery会为你处理这个，但不幸的是，它没有。

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＆amp; window.clearTimeout的原因。设置计时器时，我们还必须考虑首次单击元素可能已经是双击。

在我的代码中，我将clickDelay设置为500毫秒。因此，500ms内的两次点击被识别为“双击”。您还可以增加此值以测试clickedParagraph函数的行为。

knockoutjs单击和双击

5 个答案: