我用 Javascript 编写了一些函数。为了防止名称冲突,我决定将它们放入命名空间。在我看来一切正常,但 drop
事件现在没有 dataTransfer
对象。原代码如下:
var dropBox;
function init(){
dropBox = $('#img-container');
dropBox.bind({
dragenter: function() {
$(this).addClass('highlighted');
return false;
},
dragover: function() {
return false;
},
dragleave: function() {
$(this).removeClass('highlighted');
return false;
},
drop: function(e) {
var dt = e.originalEvent.dataTransfer; //IT IS NOT NULL
displayFiles(dt.files);
$(this).removeClass('highlighted');
return false;
}
});
showDragDropText(true);
if(window.FileReader == null) alert('Your browser doesn\'t support File API!');
}
放入命名空间后:
var mynamespace = {
dropBox: null,
init : function(){
dropBox = $('#img-container');
dropBox.bind({
dragenter: function() {
$(this).addClass('highlighted');
return false;
},
dragover: function() {
return false;
},
dragleave: function() {
$(this).removeClass('highlighted');
return false;
},
drop: function(e) {
var dt = e.originalEvent.dataTransfer; //dataTransfer IS NULL!!!
console.log(e);
mynamespace.displayFiles(dt.files);
$(this).removeClass('highlighted');
return false;
}
});
mynamespace.showDragDropText(true);
if(window.FileReader == null) alert('Your browser doesn\'t support File API!');
}
我做错了什么?
最佳答案
我找到了解决方案。我必须在我的命名空间中绑定(bind) drop
事件,如下所示:
dropBox.bind("dragenter.mynamespace",function(){
$(this).addClass('highlighted');
return false;
});
dropBox.bind("dragover.mynamespace",function(){
return false;
});
dropBox.bind("dragleave.mynamespace",function(){
$(this).removeClass('highlighted');
return false;
});
dropBox.bind("drop.mynamespace",function(e){
var dt = e.originalEvent.dataTransfer;
mynamespace.displayFiles(dt.files);
$(this).removeClass('highlighted');
return false;
});
现在它完美运行了!
关于javascript - 在 Javascript 中使用命名空间时 dataTransfer 为 null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33839917/