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

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

我使用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的下降事件？ – 我怎么知道事件是否与我的观点相关？

Answer 1

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

Answer 2

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

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