-
2015. 11. 30. 12:03 개발자료/W3C
엘리먼트에 이벤트를 할당해보면 그 영역을 벗어날때 더이상 이벤트가 발생하지 않는 문제가 있다
document 에 마우스를 사용하는동안 이벤트를 할당하면 마우스를 캡쳐할 수 있다
<div class="track-mouse">
mouse down and drag cursor out of screen area and mouse up
</div>
<script>
document.querySelector(".track-mouse").onmousedown=function(){
var t=this,c=this.getBoundingClientRect();
console.log("down",event.clientX-c.left,c.width);
document.onmousemove=function(){
var c=t.getBoundingClientRect();
console.log("move",event.clientX-c.left,c.width);
};
document.onmouseup=function(){
this.onmousemove=
this.onmouseup=null;
console.log("up",event.clientX-c.left,c.width);
};
};
</script>
document 에 마우스를 사용하는동안 이벤트를 할당하면 마우스를 캡쳐할 수 있다
<div class="track-mouse">
mouse down and drag cursor out of screen area and mouse up
</div>
<script>
document.querySelector(".track-mouse").onmousedown=function(){
var t=this,c=this.getBoundingClientRect();
console.log("down",event.clientX-c.left,c.width);
document.onmousemove=function(){
var c=t.getBoundingClientRect();
console.log("move",event.clientX-c.left,c.width);
};
document.onmouseup=function(){
this.onmousemove=
this.onmouseup=null;
console.log("up",event.clientX-c.left,c.width);
};
};
</script>
Posted by Nightly Luna