> 웹 프론트엔드 > JS 튜토리얼 > HTML_javascript 기술에서 setCapture 및 releaseCapture 사용 소개

HTML_javascript 기술에서 setCapture 및 releaseCapture 사용 소개

WBOY
풀어 주다: 2016-05-16 17:55:00
원래의
1228명이 탐색했습니다.

또한, 또 다른 매우 중요한 점은 Win32에서는 마우스 이동 이벤트가 연속적이지 않다는 것입니다. 즉, 1px 마우스 포인터를 이동할 때마다 마우스 이동이 주기적으로 발생하지 않습니다. mousemove 이벤트를 생성합니다.
그래서 직경 5px의 점과 같은 작은 페이지 개체의 경우 setCapture 및 releaseCapture가 없으면 마우스를 누른 상태에서 마우스를 빠르게 움직이면 마우스는 멀리 이동하지만 다음 mousemove 이벤트가 더 이상 점 개체로 전송되지 않기 때문에 작은 점이 여전히 제자리에 있습니다.

웹 개발과 Windows 개발의 가장 큰 차이점은 Windows 개발은 상태 저장형인 반면 웹 개발은 상태 비저장형이라는 것입니다. Windows에서는 Ctrl Alt Del을 강제로 사용하지 않는 한 모든 작업을 프로그램으로 제어할 수 있습니다. 매우 중요한 작업이 수행되더라도 사용자가 브라우저 닫기 버튼을 클릭하면 이전 작업의 결과가 지워집니다. 하지만 사용자가 선택할 수 있도록 일부 코드를 onunload 이벤트에 추가할 수 있습니다. 종료할지 모르지만 근본적으로 문제를 해결할 수는 없습니다!

몇일 전에 인터넷에서 setCapture 메소드를 보고 대략적으로 이 메소드를 특정 영역에서 사용하면 이렇다는 것을 알게 되었습니다. IE 문서에서 Onclick 또는 onmouse*** 및 기타 관련 마우스 이벤트 메서드를 작성하면 해당 마우스 동작을 모니터링합니다. 마우스가 IE 밖으로 나가더라도 계속해서 캡처할 수 있습니다. 특정 div의 onclick 이벤트 이때 닫기 버튼을 클릭하면 경고 창도 나타납니다. releaseCapture는 setCapture 메서드와 반대되는 방식으로 마우스 모니터를 해제합니다. >이 기능을 사용하면 IE의 창 닫기 및 기타 파괴적인 작업을 지연시킬 수 있으며, 파괴적인 작업이 수행되기 전에 일부 중요한 작업을 처리할 수 있습니다.
안타깝게도 setCapture 및 releaseCapture는 키보드 이벤트만 지원하지 않습니다. , onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout 등 마우스 이벤트가 작동합니다.

다음은 div 요소 divMain의 콘텐츠를 보호하려는 경우의 간단한 예입니다.
1. divMain에서 setCapture 메서드를 실행합니다.
document.getElementById(" divMain").setCapture();
2. setCapture와 releaseCapture 사이를 전환하려면 버튼 btnChange를 추가하고 전역 변수를 정의합니다.
var isFreeze = true;
3. btnChange의 onclick 이벤트에 다음 코드를 추가합니다.


코드 복사 다음:
functionchange_capture(obj) {
isFreeze = !isFreeze;
if(isFreeze) {
obj.value = "releaseCapture"
document.getElementById ("divMain").setCapture();
} else {
obj.value = "setCapture"
alert('저장! '); //중요한 작업을 수행할 수 있습니다
document.getElementById("divMain").releaseCapture();
}
}


divMain의 onclick 이벤트에서 다음 코드를 추가하세요:


function click_func()
{
if(event.srcElement.id == "divMain")
{
alert("처리 중...") //일반 작업
document.getElementById("divMain ").setCapture( );
}
else
{
if(isFreeze && event.srcElement.id != "btnChange")
{
alert('releaseCapture가 아닙니다. 실행되고 클릭할 수 없습니다') ;
document.getElementById("divMain").setCapture();
}
}
}


body의 onkeydown 이벤트 다음 코드 추가:


함수 keydown_func()
{
if (event.keyCode==115 && event.altKey) //ALT F4
{
if(isFreeze)
{
alert('Save! '); //실행 가능 중요 작업
}
//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px")
//return false ;
}
document.getElementById("divMain").setCapture();
}


전체 코드는 다음과 같습니다.


코드 복사 코드는 다음과 같습니다.



<br>setCapture 및 releaseCapture용 소형 애플리케이션<br><script> >< !-- <BR>var isFreeze = true; <BR>function click_func() { <BR>if (event.srcElement.id == "divMain") { <BR>alert("처리 중... " ); //일반 작업 <BR>document.getElementById("divMain").setCapture() <BR>} else { <BR>if (isFreeze && event.srcElement.id != "btnChange") { <BR> Alert('releaseCapture가 실행되지 않아 클릭할 수 없습니다'); <BR>document.getElementById("divMain").setCapture(); <BR>} <BR>} <BR>} <BR>function keydown_func() <BR>if (event.keyCode == 115 && event.altKey) //ALT F4 <BR>{ <BR>if (isFreeze) { <BR>alert('Save!') //중요한 작업을 수행할 수 있습니다. <BR>} <BR>//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px") <BR>//return false; getElementById( "divMain").setCapture(); <BR>} <BR>functionchange_capture(obj) { <BR>isFreeze = !isFreeze; <BR>if (isFreeze) { <BR>obj.value = "releaseCapture" ; <BR>document.getElementById("divMain").setCapture(); <BR>} else { <BR>obj.value = "setCapture" <BR>alert('저장! '); //중요한 작업을 수행할 수 있습니다 <BR>document.getElementById("divMain").releaseCapture() <BR>} <BR>} <BR>//--> ; <BR></head> <BR><body onkeydown="keydown_func();"> <BR><div id="divMain" onclick="click_func();"> IE 메뉴나 버튼을 보세요 :) 또는 IE 창 밖에서 <BR><input type="button" value="releaseCapture" onclick="change_capture(this);" <BR>id="btnChange"&gt ; 🎜><script 언어="javascript"> <BR>document.getElementById("divMain").setCapture() <BR></script> <BR></div> body> <BR></html> <BR><BR> <BR>Javascript의 호출 및 적용 기능에 대해<BR>Javascript의 객체 지향 응용 프로그램에서 호출 및 적용 기능을 자주 접하게 됩니다. 혼란스러운. 실제로 함수나 객체에서 이 예약어의 값을 변경할 수 있습니다. 이 예약어의 기본값은 클래스 자체입니다. 예: <BR><BR><BR><BR><BR>코드 복사 </script>


코드는 다음과 같습니다.
코드는 다음과 같습니다.


Person = function() {
this.Init.apply (this, 인수);
},
fullName: function() {
return this.first '' this.last;
fullNameReversed: function() {
return this.last ', ' this.first
}
var s = new Person2('creese', 'yang'); s.fullName());
Alert(s.fullNameReversed());


호출 및 적용 함수는 함수 내용을 할당할 수 있습니다(익명 매개변수 포함, 트리거되지 않음)
함수 바인딩 이벤트 적용은 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.


Function.prototype.BindForEvent = function() {
var __m = this, object = 인수[0], args = new Array()
for(var i = 1; i < 인수.길이; i ){
args.push(arguments[i]);
}
return function(event) { return __m.apply(object, [( event || window.event)].concat (args)); } } 함수 바인딩 매개변수에 대한 호출 및 적용 함수의 적용은 다음과 같습니다.



코드 복사


코드는 다음과 같습니다.

Function.prototype.Bind = function() {
var __m = this, object = 인수[0], args = new Array()
for(var i = 1; i < ; 인수.길이; i ){
args.push(arguments[i]);
}
return function() {
return __m.apply(object, args);
}

call과 apply의 함수는 동일합니다. 단지 매개변수 형식만 다릅니다. fun.call(obj, 인수); 단수형이다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿