防止可拖动的ko点击绑定？

Question

我发现了一些在拖动时停止事件传播的问题，包括我现在正在尝试的解决方案：

Demo Fiddle

$('div').draggable({
    start: function(event, ui) {
        ui.helper.bind("click.prevent",
            function(event) { event.preventDefault(); });
    },
    stop: function(event, ui) {
        setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
    }       

这只是行不通。该问题与 KO 点击绑定无关。我发现唯一一个相关的，没有接受的答案（唯一的答案是模糊的，说要尝试 preventDefault()）。

那么，如何防止在拖动项目后释放鼠标按钮时点击绑定？

Answer 1

您可以使用自定义绑定解决此问题：

ko.bindingHandlers.clickUnlessDragged = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var $element     = $(element),
          clickHandler = ko.utils.unwrapObservable(valueAccessor()),
          wasDragged   = false,
          mouseupHandler,
          dragstartHandler,
          dragstopHandler;

      mouseupHandler = function mouseupHandler(event) {
          if (!wasDragged) {
              clickHandler(event);
          }
      };

      dragstartHandler = function dragstartHandler() {
          wasDragged = true;
      };

      dragstopHandler = function dragstopHandler() {
          wasDragged = false;
      };

      $element.on('mouseup', mouseupHandler);
      $element.on('dragstart', dragstartHandler);
      $element.on('dragstop', dragstopHandler);

      $element.draggable();

      // clean up after ourselves if KO removes the element
      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $element.off('mouseup', mouseupHandler);
        $element.off('dragstart', dragstartHandler);
        $element.off('dragstop', dragstopHandler);
        $element.draggable("destroy");
      });
  }
};

将其用于：

<!-- ko foreach: name -->
<div data-bind="text: name, clickUnlessDragged: function() {console.log('clicked')}"></div>
<!-- /ko -->

所有三个事件处理程序共享同一个闭包，因此我们可以使用wasDragged 标志来传达拖动是否已经开始。

在mouseup 事件后停止拖动；因为我们首先绑定我们自己的mouseup 处理程序，所以它在dragstop 之前运行。

Updated fiddle.