Question

用Google搜索了很多内容并没有获得任何有用的提示/解决方案。我有这个简单的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>

选择功能在使用Chrome和Firefox时无法使用Chrome。我尝试了很多东西（你可以看到我尝试用canvas.on更改canvas.observe），更改了jquery和jqueryui版本但没有改变。在谷歌浏览器上使用开发人员工具并没有多大帮助。由css给出的html元素没有z-index，我尝试禁用不同的js和css，但这并没有解决问题。

我注意到问题也显示在Fabric.js的演示页面上（刚试过http://fabricjs.com/stickman/）;渲染工作，效果，但没有鼠标事件或选择工作。

这是一个错误???

Answer 1

好的，终于找到了什么不起作用。我已经连接了一台Wacom设备，看起来最新的Chrome版本设置了一个关于“启用触摸的设备”的标志，这打破了我的代码。

一个简单的解决方案是改变chrome标志（chrome：// flags /）

相关文章： https://github.com/kangax/fabric.js/issues/450

Fabric.js画布未在Google Chrome上捕获鼠标事件

1 个答案: