我发现了一些在拖动时停止事件传播的问题,包括我现在正在尝试的解决方案:
$('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)?
最佳答案
您可以使用自定义绑定(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
之前运行。
关于javascript - 防止 ko 单击绑定(bind)到可拖动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20499928/