Chrome上出现Javascript TypeError事件异常

Question

我正在尝试为Chrome添加一个FileReader onload事件，它在Firefox上运行良好，但当我尝试Chrome时会抛出TypeError异常。

这是我的代码：

function random(min, max)
{
    return Math.floor(Math.random() * (max - min + 1) + min);
}
function handleDrop(event) {
    var dt = event.dataTransfer,
        files = dt.files,
        count = files.length;
    event.stopPropagation();
    event.preventDefault();
    for (var i = 0; i < count; i++)
    {
        var fileReader = new FileReader();
        fileReader.addEventListener("loadend", function(e) {
            xn = random(0, $('canvas').attr('width'));
            yn = random(0, $('canvas').attr('height'));
            widthn = random(100, 200);
            $("canvas").drawImage({
                source: e.target.result,
                fromCenter: false,
                x: xn,
                y: yn,
                width: widthn
            });
            delete e.target.result;
        } , false);
        fileReader.readAsDataURL(files[i]);
    }
}
$(document).ready(function()
{
    var dropContainer = document.getElementById("content");
    dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false);
    dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false);
    dropContainer.addEventListener("drop", handleDrop, false);
});

我正在使用Chrome脚本调试器，异常出现在以下行：

fileReader.addEventListener("loadend", function(e) {

我该怎么做才能在Chrome中修复此问题？

Answer 1

很明显，FileReader没有addEventListener。（TypeError: Object #<FileReader> has no method 'addEventListener'）

用途：

var fileReader = new FileReader();
fileReader.onloadend = function (e) {
    xn = random(0, $('canvas').attr('width'));
    yn = random(0, $('canvas').attr('height'));
    widthn = random(100, 200);
    $("canvas").drawImage({
        source: e.target.result,
        fromCenter: false,
        x: xn,
        y: yn,
        width: widthn
    });
};

Answer 2

在将CSS属性发送到"random（）"函数之前，您可能应该确保将其显式转换为数字。

        // ...
        xn = random(0, ~~$('canvas').attr('width'));
        yn = random(0, ~~$('canvas').attr('height'));

你当然可以使用parseInt()；这只是一个例子；因此：

        // ...
        xn = random(0, parseInt($('canvas').attr('width'), 10));
        yn = random(0, parseInt($('canvas').attr('height'), 10));

当然，变量也应该用var:声明

        // ...
        var xn = random(0, ~~$('canvas').attr('width'));
        var yn = random(0, ~~$('canvas').attr('height'));