我在谷歌上搜索了很多，但没有得到任何有用的提示/解决方案。
我有一个简单的HTML页面，包括一些CSS样式、jQuery、jQuery-ui和Fabric.js；在document.ready时，我启动一个ajax调用并在画布上渲染一些东西。到目前为止，一切都看起来很好，但当我需要捕捉一些鼠标事件时，我什么也没有得到。这种行为只出现在Chrome（当前版本25.0.1364.97）上；在Firefox或Internet Explorer（v. 9）上，一切正常。
以下是一些js代码:
$(document).ready(function() {
//setup canvas etc.
eCanvas = new fabric.Canvas('EViewport', {
backgroundColor: 'rgba(255, 50, 50, .3)',
selection: true,
selectionColor: 'blue',
selectionLineWidth: 2
});
EViewport = $("#CanvasContainer");
viewW = EViewport.width();
viewH = EViewport.height();
eCanvas.setWidth(viewW);
eCanvas.setHeight(viewH);
eCanvas.observe('object:selected', function(options) {
if (options.target) {
console.log('an object was selected! ', options.target.type);
}
});
eCanvas.observe('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mousedown', function() {
console.log('mouse click! ');
});
//... render some rectangles and stuff...
});
以下是HTML结构（请注意，Eviewport.js文件包含先前粘贴的代码）:
这里是HTML结构（请注意，Eviewport.js文件包含先前粘贴的代码）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="baseCss/jquery-ui.css" type="text/css">
<script type="text/javascript" src="baseJs/jquery.js"></script>
<script type="text/javascript" src="baseJs/jquery-ui.js"></script>
<script type="text/javascript" src="Eviewport.js"></script>
<link type="text/css" rel="stylesheet" href="Eviewport.css">
<script type="text/javascript" src="baseJs/Fabric.js"></script>
</head>
<body>
<div id="MainContainer">
<div id="CanvasContainer">
<canvas id="EViewport">
Canvas is not supported
</canvas>
</div>
</div>
</body>
</html>
选择功能在IE和Firefox上起作用，但在Chrome上不起作用。 我尝试了很多方法（你可以看到我试图将
canvas.observe更改为canvas.on），更改了jQuery和jQueryui的版本，但没有改变。
在Google Chrome上使用开发者工具并没有显示出多少信息。
CSS没有给出HTML元素的z-index，并且我尝试禁用不同的js和CSS，但这并没有解决问题。我注意到这个问题也出现在Fabric.js的演示页面上（只是尝试http://fabricjs.com/stickman/）；渲染工作正常，效果也正常，但鼠标事件或选择不起作用。
这是一个bug吗？