Question

我很高兴编码和学习骨干这个＃〜@@！发生了！

我使用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事件??? - 我怎么知道一个事件是否与我的观点联系在一起？

Answer 1

你不是疯了。谷歌浏览器的最新更新打破了很多网站的浏览器功能，包括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 demo适用于我（Chrome 24.0.1312.52）。这是关于这个问题的Chromium issue #168387。

和pull request to fix this in NodeCellar。

Answer 2

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

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


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

dragOver: function (event) {
    event.preventDefault();
}

drop事件未在主干视图上触发

2 个答案: