jquery - drop 事件不会在主干 View 上触发

Question

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

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

在我的 Backbone View 中，我处理这些事件:

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 事件也是如此....

这会不会是错别字？？我有点疯了，我不明白发生了什么，也记不起要回去检查的好 promise :S

谢谢大家，如果你能给出一些可能的答案:)

例如: - 如何调试掉落事件？？？ - 我怎么知道一个事件是否与我的观点有关？

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 .