Question

我在body onload上调用init（）时在chrome中遇到此错误，但它在mozilla firefox中工作正常

Uncaught TypeError: e.target.setCapture is not a function

如果chrome不支持setCapture（）那么我们可以做什么？

 function init() {
          var btn = document.getElementById("anchorId");
          btn.addEventListener("mousedown", mouseDown, false);
          btn.addEventListener("mouseup", mouseUp, false);
        }

        function mouseDown(e) {
         e.target.setCapture();
         e.target.addEventListener("mousemove", mouseMoved, false);
        }

        function mouseUp(e) {
          e.target.removeEventListener("mousemove", mouseMoved, false);
        }

        function mouseMoved(e) {
                var x = e.clientX;     
                var y = e.clientY;     

                var anchorPathWidth = document.getElementById('anchorPath').offsetWidth;

                document.getElementById('anchorId').style.position = "absolute";
                document.getElementById('anchorId').style.left = (x * 100)/anchorPathWidth + "%";

        }

Answer 1

检查此更新：

function init() {
        alert(1);
      var btn = document.getElementById("anchorId");
      btn.addEventListener("mousedown", mouseDown, true);
      btn.addEventListener("mouseup", mouseUp, true);
    }

    function mouseDown(e) {
     console.log("Mouse Down");
     console.log(e.target)
     if(e.target.addEventListener)
     {
     e.target.addEventListener("mousemove", mouseMoved, true);
     }
        else
        {
            if(e.target.setCapture)
            {
             e.target.setCapture();
            }
        }
    }

    function mouseUp(e) {
      e.target.removeEventListener("mousemove", mouseMoved, true);
      console.log("Mouse Up");
    }

    function mouseMoved(e) {
            var x = e.clientX;     // Get the horizontal coordinate
            var y = e.clientY;     // Get the vertical coordinate
            var coor = "X coords: " + x + ", Y coords: " + y;
            console.log("Move the Div to " + coor);

            var anchorPathWidth = document.getElementById('anchorPath').offsetWidth;

            document.getElementById('anchorId').style.position = "absolute";
            document.getElementById('anchorId').style.left = (x * 100)/anchorPathWidth + "%";
            //console.log( x/anchorPathWidth + "%");    
    }

现场演示：http://jsfiddle.net/nadzc347/4/

Answer 2

Chrome不支持，请参阅https://groups.google.com/a/chromium.org/forum/#!topic/chromium-bugs/NZvlBWQ3L3A

Answer 3

无需在chrome浏览器中调用setCapture（）方法，只需要mozilla浏览器。

使用e.target.addEventListener（＆＃34; mousemove＆＃34;，mouseMoved，true）;在chrome

function mouseMoved(e) {
var output = document.getElementById("output");
console.log("Position: " + e.clientX + ", " + e.clientY);
}

@Anoop B.K，他的解决方案将正常工作，因为他正在检查mouseDown事件方法中的条件是否＆＃34; e.target.addEventListener＆＃34;或者e.target.setCapture是真的。

显示未捕获的TypeError：e.target.setCapture不是chrome中的函数

3 个答案: