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

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演示适用于我(Chrome 24.0.1312.52).这是关于这个问题的Chromium问题#168387.

以及在NodeCellar中修复此问题的pull请求.