Question

的JavaScript / JQuery代码

当我使用1.5.2版本的JQuery时，这段代码非常好用。但是当我使用最新版本的JQuery（1.9.1）时，这段代码不起作用。需要更改此代码才能在最新的JQuery中使用。

正如您所见，Jquery 1.5.2可以工作但不能使用1.9.1。

var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;

// -------------------------------------------------------------

// objects :

function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

// -------------------------------------------------------------

// draw functions :

function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) { // draw circle function
    ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

function drawScene() { // main drawScene function
    clear(); // clear canvas

    ctx.beginPath(); // custom shape begin
    ctx.fillStyle = 'rgba(255, 110, 110, 0.5)';
    ctx.moveTo(circles[0].x, circles[0].y);
    for (var i=0; i<circles.length; i++) {
        ctx.lineTo(circles[i].x, circles[i].y);
    }
    ctx.closePath(); // custom shape end
    ctx.fill(); // fill custom shape

    ctx.lineWidth = 5;
    ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
    ctx.stroke(); // draw border

    for (var i=0; i<circles.length; i++) { // display all our circles
        drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15);
    }
}

// -------------------------------------------------------------

// initialization

$(function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;
    var width = canvas.width;
    var height = canvas.height;

    var circlesCount = 7; // we will draw 7 circles randomly
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;
        circles.push(new Circle(x,y,circleRadius));
    }

    // binding mousedown event (for dragging)
    $('#scene').mousedown(function(e) {
        var canvasPosition = $(this).offset();
        var mouseX = e.layerX || 0;
        var mouseY = e.layerY || 0;
        for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not
            var circleX = circles[i].x;
            var circleY = circles[i].y;
            var radius = circles[i].radius;
            if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
                selectedCircle = i;
                break;
            }
        }
    });

    $('#scene').mousemove(function(e) { // binding mousemove event for dragging selected circle
            var mouseX = e.layerX || 0;
            var mouseY = e.layerY || 0;
        if (selectedCircle != undefined) {
            var canvasPosition = $(this).offset();

            var radius = circles[selectedCircle].radius;
            circles[selectedCircle] = new Circle(mouseX, mouseY,radius); // changing position of selected circle
        }

        hoveredCircle = undefined;
        for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not
            var circleX = circles[i].x;
            var circleY = circles[i].y;
            var radius = circles[i].radius;
            if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
                hoveredCircle = i;
                break;
            }
        }
    });

    $('#scene').mouseup(function(e) { // on mouseup - cleaning selectedCircle
        selectedCircle = undefined;
    });

    setInterval(drawScene, 30); // loop drawScene
});

Answer 1

jQuery不再盲目地将Event个对象的所有属性从真实事件对象复制到jQuery提供的属性，所以这些行：

var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;

...在0和mouseX处理程序中失败（始终为mouseY和mousedown}返回mousemove，因为the jQuery event object没有layerX和layerY。

jQuery使原始事件对象可用为originalEvent，因此修复了它：

var mouseX = e.originalEvent.layerX || 0;
var mouseY = e.originalEvent.layerY || 0;

Updated JSBin | Source

或与多个版本兼容：

var mouseX = e.layerX || e.originalEvent.layerX || 0;
var mouseY = e.layerY || e.originalEvent.layerY || 0;

Updated JSBin | Source

Answer 2

变化：

e.layerX
e.layerY

到

e.originalEvent.layerX
e.originalEvent.layerY

那项工作:)）

（http://jsbin.com/ukagas/3/edit）

JQuery代码适用于1.5.2版，但不适用于1.9.1版

2 个答案: