挂起事件不在骨干视图上发射 [英] drop event not firing on backbone view

问题描述

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

我使用require来将我的观点与模型等分开。

在我的骨干视图中我处理这个事件：

  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（） ）; 
返回这个; 
}，
 
事件：{
'点击＃关系菜单.newItem'：'launch_modal_relations'，
'点击#delete'：'delete_dish'，
'点击＃save-basic-changes'：'save_basic'，
'drop #dropPicture'：'dropHandler'，
'dr代理商#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'）。 
 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]; 
 ... 
 
}，
返回DishView; 
 
}）; 
  

我的拖放工作正在突然发生，当添加了更多功能时，它停止工作： （图像文件在浏览器中打开。

我已经阅读了有关DOM的准备工作，这有时会发生（如果代码在DOM准备好），但点击事件仍然被触发，也是dragenter事件....

这可能是一些打字错误吗？有点疯狂，我不明白发生了什么，不记得一个很好的承诺回去检查：S

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

例如：
- 如何调试drop事件???
- 我如何知道一个事件是否与我的观点相关？

解决方案

你不是疯了。 Google Chrome最近的更新破坏了许多网站的入门级浏览器功能，其中包括NodeCellar教程。
虽然这很容易解决， Chrome现在要求您防止拖动事件的默认操作：

  $（'div'）。on（'drop'，function（e）{
 e.originalEvent.stopPropagation（）; 
 e.originalEvent.preventDefault（）; 
 $ ）.html（'一个文件被丢弃！'）; 
}）。on（'dragover'，function（e）{
 e.preventDefault（）; 
}）;这个 JSFiddle演示适用于我（Chrome 24.0.1312.52）。以下是有关此问题的 Chromium问题＃168387 。 p> 
 
 
另外，将请求修复到NodeCellar 。
 
I was happily coding and learning backbone when this #~@@! happened!

I use require to separate my views from models, etc.

In my Backbone view I handle this events:
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;

});
My drag&drop was working and suddenly when a lot of more functionality was added, it stopped working :( the image file it's opened in the browser.

I've read about the DOM being ready and that this can happen sometimes (if the code gets evaluated when the DOM is ready) but the click events still get fired, also the dragenter event....

Could this be some typo?? I'm going a little bit crazy I can't understand whats going on and can't remember a good commit to go back and check :S

Thank you all if you can show some possible answers :) 

For example:
 - how can I debug the drop event??? 
 - how can I know if an event is tied to my view?
解决方案
You're not crazy. A recent update in Google Chrome broke the drop-into-browser feature for a lot of sites, including, it seems, the NodeCellar tutorial.
This is quite easily fixable, though. Chrome now requires you to prevent the default action for the dragover event:
$('div').on('drop',function(e){
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    $(this).html('A file was dropped!');
}).on('dragover', function (e) {
  e.preventDefault();
});
This JSFiddle demo works for me (Chrome 24.0.1312.52). Here's the Chromium issue #168387, about this problem.

And a pull request to fix this in NodeCellar.

                        
这篇关于挂起事件不在骨干视图上发射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！