imSonuGupta imSonuGupta - 5 months ago 44
HTML Question

Showing Uncaught TypeError: e.target.setCapture is not a function in chrome

I get this error in chrome while calling init() on body onload but it is working fine in mozilla firefox

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


If chrome is not supporting setCapture() then what can we do?

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

Check this update:

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 + "%");    
    }

Live Demo : http://jsfiddle.net/nadzc347/4/