投放事件不在主干视图上触发

当这个#〜@@!我很高兴编码和学习骨干 发生了!

我使用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; }); 

我的拖放工作,突然间,当添加了很多更多的function,它停止工作:(在浏览器中打开的图像文件。

我已经阅读了DOM正在准备就绪,这有时会发生(如果代码在DOM准备就绪后被评估), 但点击事件仍然被解雇,也是dragenter事件….

这可能是一些错字? 我有点疯狂,我不明白是怎么回事,不记得一个好的承诺回去检查:S

谢谢大家,如果你能显示一些可能的答案:)

例如: – 我怎样才能debugging的下降事件? – 我怎么知道事件是否与我的观点相关?

       

网上收集的解决方案 "投放事件不在主干视图上触发"

你不疯了 谷歌浏览器最近的更新打破了许多网站的浏览器function,其中包括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 。

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

 events: { .... .... "drop #picture" : "dropHandler", "dragover #picture" : "dragOver" }, dropHandler: function (event) { event.stopPropagation(); event.preventDefault(); .... .... }, dragOver: function (event) { event.preventDefault(); }