4

当这个#~@@！发生了！

我使用 require 将我的视图与模型等分开。

在我的 Backbone 视图中，我处理这些事件：

define(['...'],function(...) {

var DishView = Backbone.View.extend({
    template: _.template(dish),
    tagName: 'div',
    id: 'dish',

    initialize: function() {
        console.log('initializing dishView');
        this.model.on('change', this.render, this);
    },

    render: function(){
        console.log('rendering dishView');
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        'click #relations-menu .newItem': 'launch_modal_relations',
        'click #delete' : 'delete_dish',
        'click #save-basic-changes': 'save_basic',
        'drop #dropPicture' : 'dropHandler',
        'dragenter #dropPicture' : 'alertMe'
    },

    alertMe: function () {
        console.log('clicked on image');
    },

    delete_dish: function () {
        this.model.deleteMyself();
        Backbone.history.navigate('/', {trigger: true});
    },

    save_basic: function (event) {
        var name = $('#inputName').val();
        var description = $('#inputDescription').val();
        var price = $('#inputPrice').val();
        this.model.updateBasicInfo(name, description, price);
    },

    dropHandler: function(event) {
        event.preventDefault();
        console.log('drop received');
        event.stopPropagation();

        var e = event.originalEvent;
        e.dataTransfer.dropEffect = 'copy';
        this.pictureFile = e.dataTransfer.files[0];
            ...

    },
return DishView;

});

我的拖放工作正常，但当添加了更多功能时，它突然停止工作:(它在浏览器中打开的图像文件。

我已经阅读了有关 DOM 准备就绪的信息，并且有时会发生这种情况（如果在 DOM 准备好时对代码进行评估），但点击事件仍然会被触发，dragenter 事件也是如此......

这可能是一些错字吗？我有点疯了，我不明白发生了什么，也不记得有一个好的承诺要回去检查：S

如果您能提供一些可能的答案，谢谢大家:)

例如： - 如何调试 drop 事件？？？- 我怎么知道一个事件是否与我的观点相关？

4

2 回答 2

24

你没疯。谷歌浏览器最近的一次更新打破了很多网站的浏览器功能，包括，似乎是 NodeCellar 教程。不过，这很容易解决。Chrome 现在要求您阻止dragover事件的默认操作：

$('div').on('drop',function(e){
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    $(this).html('A file was dropped!');
}).on('dragover', function (e) {
  e.preventDefault();
});

这个JSFiddle 演示适用于我（Chrome 24.0.1312.52）。这是Chromium 问题 #168387，关于这个问题。

以及在 NodeCellar 中修复此问题的拉取请求。

于 2013-01-16T00:40:28.213 回答
2

您可以在 Backbone 上添加查看此代码：

events: {
....
....
    "drop #picture" : "dropHandler",
    "dragover #picture" : "dragOver"
},


dropHandler: function (event) {
    event.stopPropagation();
    event.preventDefault();
....
....
},

dragOver: function (event) {
    event.preventDefault();
}
于 2013-08-27T08:56:19.747 回答