angular ui-sortable: 在 Firefox 中停止点击事件
angular ui-sortable: Stop click event on drop in Firefox
我正在使用 angular ui-sortable 通过拖放来订购商品。正在排序的项目还附加了一个点击事件。在 Firefox 中,放下其中一项会触发点击事件。在我测试过的所有其他浏览器中,它没有。
Here's一个简单的例子(检查控制台日志):
HTML
<div ng-app="app" ng-controller="ctrl as vm">
<div ui-sortable="vm.sortableOptions" ng-model="vm.items">
<div ng-repeat="item in vm.items">
<a href ng-click="vm.log()">
<div class="box"></div>
</a>
</div>
</div>
</div>
CSS
.box {
width: 100px;
height: 100px;
background: #ff0000;
margin: 8px;
}
JS
angular.module('app', ['ui.sortable'])
.controller('ctrl', [function () {
var vm = this;
vm.sortableOptions = {
stop: function (e) {
}
}
vm.items = [
{},
{},
{},
{}
];
vm.log = function () {
console.log('clicked');
}
}]);
我希望这不会发生。调用 Event.preventDefault() 没有像我希望的那样工作(可能是因为它是一个 angular 单击事件)。
我当然可以在停止回调中设置某种标志(它似乎总是在点击处理程序之前触发)但我更喜欢更简洁的解决方案,因为它可能会变得有点难看。
使用:
vm.sortableOptions = {
helper: 'clone'
};
它告诉模块使用克隆进行拖动,这也会禁用所有触发的事件。我检查了 Firefox,它运行良好。
我正在使用 angular ui-sortable 通过拖放来订购商品。正在排序的项目还附加了一个点击事件。在 Firefox 中,放下其中一项会触发点击事件。在我测试过的所有其他浏览器中,它没有。
Here's一个简单的例子(检查控制台日志):
HTML
<div ng-app="app" ng-controller="ctrl as vm">
<div ui-sortable="vm.sortableOptions" ng-model="vm.items">
<div ng-repeat="item in vm.items">
<a href ng-click="vm.log()">
<div class="box"></div>
</a>
</div>
</div>
</div>
CSS
.box {
width: 100px;
height: 100px;
background: #ff0000;
margin: 8px;
}
JS
angular.module('app', ['ui.sortable'])
.controller('ctrl', [function () {
var vm = this;
vm.sortableOptions = {
stop: function (e) {
}
}
vm.items = [
{},
{},
{},
{}
];
vm.log = function () {
console.log('clicked');
}
}]);
我希望这不会发生。调用 Event.preventDefault() 没有像我希望的那样工作(可能是因为它是一个 angular 单击事件)。
我当然可以在停止回调中设置某种标志(它似乎总是在点击处理程序之前触发)但我更喜欢更简洁的解决方案,因为它可能会变得有点难看。
使用:
vm.sortableOptions = {
helper: 'clone'
};
它告诉模块使用克隆进行拖动,这也会禁用所有触发的事件。我检查了 Firefox,它运行良好。