拖动项目时触发的点击事件（Firefox）

Question

当我点击一个项目时，我可以通过bootstrap-editable编辑字段。
当我拖放项目时，我可以使用jquery.ui.sortable更改项目的位置。

在Google Chrome中一切正常。
但是，在Firefox 15.0.1中，我遇到了以下问题。

移动项目后，弹出窗口显示编辑字段。
我认为这是由于事件传播引起的。
我试图修复它，但没有成功...

这是我的代码片段：

    onSortReceive: function (e, ui) {
        this.$(ui.item[0]).trigger('drop', this.options.taskType);
        // TODO just on firefox there is a issue related to bootstrap-editable
        // it shows the popup even if there is e.stopPropagation() here
        // the only way to fix this issue is to re-render the view
        e.stopPropagation(); // it makes no difference 
        this.render(); // it fix the problem 
                       // but I want to avoid to re-render the view
    },

完整代码可以前往：
https://github.com/antonioJs/CoCoTask/pull/21/files。

工作版本在这里：
http://computerone.altervista.org/CoCoTask/（问题仅出现在Firefox浏览器中）。

如何解决这个问题？

谢谢。

- antonjs

---

你尝试过使用 e.preventDefault() 吗？ - tkone

嗨@tkone，是的我试过了，但它不起作用。感谢您的评论。 - antonjs

Answer 1

好的，这里是我找到的一种有效的方法。在你的taskItem.js中，用以下代码替换onRender：

    onRender: function () {
        var sortInAction = false;
        this.$el.find('label').mouseup(function(e) {
          sortInAction = 'absolute' === $(e.target).closest('li').css('position');
        }).click(function(e) {
            if (sortInAction)
              e.stopImmediatePropagation();
        }).editable({
            type: 'textarea',
            name: 'task-name',
            validate: this.editTaskName,
            template: '<textarea rows="3"></textarea>'
        });
    },

希望能有所帮助。

- rinat.io

Answer 2

你应该在 mouseup 事件中使用 e.preventDefault()，而不是在 sortreceive 的 jquery.ui 事件中。也许像这样的代码会起作用（未经测试）：

'mouseup li': 'liMouseUp'

/* ... */

liMouseUp: function(e) {
    if ($(e.target).is('.ui-draggable-dragging')) {
        e.preventDefault();
    }
}

- rinat.io

---

感谢您的回答。无论如何：1）在拖放和单击两种情况下，$(e.target) = label.editable。2）e.preventDefault()没有任何区别。3）通过使用e.stopPropagation()，它停止了拖放，并出现了弹出窗口以编辑字段。 - antonjs

尝试使用 $(e.currentTarget) 而不是 $(e.target)。 - rinat.io

是的，这种方式行不通...添加了另一个可能的解决方案。 - rinat.io