Повторный onclick

Есть код

<script language="JavaScript" type="text/javascript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
 
function init() {
    if (ns4) {
    	document.captureEvents(Event.onmousemove);
}

document.onmousemove=mousemove;
}
function mousemove(event) {
        var mouse_x = y = 0;
    if (document.attachEvent != null) {
        mouse_x = window.event.clientX;
        mouse_y = window.event.clientY;
    } else if (!document.attachEvent && document.addEventListener) {
        mouse_x = event.clientX;
        mouse_y = event.clientY;
    }
    status="x = " + mouse_x + ", y = " + mouse_y;
   
 document.getElementById('x1').style.left = mouse_x;
  document.getElementById('x1').style.top = mouse_y;
 
}

</script>
 
<body>
<br>
        <div id="x1" style="position:absolute;width:50%;height:50%;" onclick="init()">
 <img src="2.JPG" width="189">
        </div>

Если нажать на картинку, то она будет следовать за курсором. Но а как сделать так, чтобы при втором клике на картинку она бы уже отстала от курсора и стояла бы на том месте, на котором остановили, а при 3 клике она снова следовала за курсором и так далее


Ответы (1 шт):

Автор решения: Igor
function init() {
  ...
  document.onmousemove = document.onmousemove? null : mousemove;
}

ns4 = (document.layers) ? true : false
ie4 = (document.all) ? true : false

function init() {
  if (ns4) {
    document.captureEvents(Event.onmousemove);
  }

  document.onmousemove = document.onmousemove? null : mousemove;
}

function mousemove(event) {
  var mouse_x = 0;
  var mouse_y = 0;
  if (document.attachEvent != null) {
    mouse_x = window.event.clientX;
    mouse_y = window.event.clientY;
  } else if (!document.attachEvent && document.addEventListener) {
    mouse_x = event.clientX;
    mouse_y = event.clientY;
  }
  //console.log("x = " + mouse_x + ", y = " + mouse_y);

  document.getElementById('x1').style.left = mouse_x+"px";
  document.getElementById('x1').style.top = mouse_y+"px";

}
#x1 {
  border: 1px solid black;
  display: block;
}
<br>
<div id="x1" style="position:absolute;width:50%;height:50%;" onclick="init()">
  <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="189">
</div>

→ Ссылка