javascript - 防止 ko 单击绑定(bind)到可拖动？

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 点击绑定(bind)无关。我发现的唯一一个确实相关的，没有公认的答案(唯一的答案很模糊，说要尝试 preventDefault())。

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

Answer 1

您可以使用自定义绑定(bind)解决此问题:

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 事件后拖动停止；因为我们首先绑定(bind)了我们自己的 mouseup 处理程序，所以它在 dragstop 之前运行。

Updated fiddle .