Question

我们有一个使用webview的绘图应用程序，可以使用Android 6.0和7.0，Chrome版本56.0.2924.87和蓝牙鼠标，但Chrome更新到58.0.3029.83后，左键单击事件不会触发。我直接从Chrome测试了开放绘图应用程序（或使用任何其他工具在线绘制，如sketch.io）并发现了同样的问题。

可能是新设置吗？或者如果出现错误，Chrome将如何从Chrome降级。

[补充]

我刚刚举了一个简单的例子：

Example on jsbin

当您使用Chrome for Android最新版本56.0.2924.87时，此工作正常（显示黄色）点击事件并继续单击并移动鼠标。但是当您通过Webview打开此页面时（例如使用Webview Developer Browser）并执行相同操作，只需单击是触发器，而不是mousemove事件。

使用的代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset='ISO-8859-1'>
        <style>

            .canvas{
               width: 500px;
               height: 300px;
               border-style: double;
            }

            .mini-box{
               width: 30px;
               height: 20px;
               border: solid;
               border-width: 1px;
               float: left;
               text-align: center;
            }

         </style>
     <script language='JavaScript'>

         var mc, mm, mu, md, ts, tm, te, tc;

         function reset_box(boxName){
             var oBox = document.getElementById(boxName);
             oBox.style.backgroundColor = '#ffffff';
         }

         function click_on_canvas(){
             var sId = 'mc';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(mc);
             mc = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function mousemove_on_canvas(){
             var sId = 'mm';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(mm);
             mm = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function mouseup_on_canvas(){
             var sId = 'mu';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(mu);
             mu = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function mousedown_on_canvas(){
             var sId = 'md';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(md);
             md = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function touchstart_on_canvas(){
             var sId = 'ts';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(ts);
             ts = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function touchmove_on_canvas(){
             var sId = 'tm';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(tm);
             tm = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function touchend_on_canvas(){
             var sId = 'te';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(te);
             te = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function touchcancel_on_canvas(){
             var sId = 'tc';
             var oBox = document.getElementById(sId);
             oBox.style.backgroundColor = '#ffff00';
             clearTimeout(tc);
             tc = setTimeout('reset_box("' + sId + '")', 1000);
         }

         function prepareCanvas(){
             oContext.strokeRect(0, 0, oCanvas.width, oCanvas.height);
             with (oCanvas){
                 addEventListener('click', click_on_canvas, false);
                 addEventListener('contextmenu', click_on_canvas, false);
                 addEventListener('mousemove', mousemove_on_canvas, false);
                 addEventListener('mouseup', mouseup_on_canvas, false);
                 addEventListener('mousedown', mousedown_on_canvas, false);
                 addEventListener('touchstart', touchstart_on_canvas,false);
                 addEventListener('touchmove', touchmove_on_canvas, false);
                 addEventListener('touchleave', touchend_on_canvas, false);
                 addEventListener('touchend', touchend_on_canvas, false);
                 addEventListener('touchcancel', touchcancel_on_canvas, false);
         }
    }

    </script>
</head>
<body>
    <canvas id='surface' class='canvas'>This browser can not handle HML5</canvas>
    <br />
    <div id='md' class='mini-box'>md</div>
    <div id='mm' class='mini-box'>mm</div>
    <div id='mu' class='mini-box'>mu</div>
    <div id='mc' class='mini-box'>mc</div>
    <div id='mx' class='mini-box'>mx</div>
    <div id='ts' class='mini-box'>ts</div>
    <div id='tm' class='mini-box'>tm</div>
    <div id='te' class='mini-box'>te</div>
    <div id='tc' class='mini-box'>tc</div>
    <script language='JavaScript'>

        var oCanvas = document.getElementById('surface');
        var oContext = oCanvas.getContext('2d');
        prepareCanvas();

    </script>
</body>
</html>

Chrome for Android左键单击事件鼠标的问题

0 个答案: