谷歌搜索了很多，没有得到任何有用的提示/解决方案。我有这个简单的 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 文件包含之前粘贴的代码）：
<!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 版本，但没有任何改变。在谷歌浏览器上使用开发者工具并没有显示太多。CSS给出的html元素上没有z-index，我尝试禁用不同的js和CSS，但这并没有解决问题。
我注意到问题显示也显示在 Fabric.js 的演示页面上（刚刚尝试过http://fabricjs.com/stickman/）；渲染工作，效果也但没有鼠标事件或选择工作。
这是一个错误吗？