ホームページ >ウェブフロントエンド >jsチュートリアル >HTML_javascript スキルでの setCapture と releaseCapture の使用の概要

HTML_javascript スキルでの setCapture と releaseCapture の使用の概要

WBOY
WBOYオリジナル
2016-05-16 17:55:001211ブラウズ

さらに、もう 1 つの非常に重要な点は、Win32 ではマウス移動イベントが継続的ではないということです。つまり、1px マウス ポインターを移動するたびにマウス移動が発生するわけではなく、マウスの位置が定期的に変更されます。マウス移動イベントを生成します。
したがって、直径 5px のドットなどの小さなページ オブジェクトの場合、setCapture と releaseCapture がない場合、マウスを押したままにした後、マウスを素早く動かすと、マウスは離れますが、次の Mousemove イベントがドット オブジェクトに送信されないため、小さなドットはまだ所定の位置にあります。

Web 開発と Windows 開発の最大の違いは、Windows 開発はステートフルであるのに対し、Windows では Ctrl Alt Del が強制されない限り、すべての操作をプログラムによって制御できることです。非常に重要な操作が実行された場合でも、ユーザーがブラウザの閉じるボタンをクリックするとすぐに前の操作の結果が消去されますが、ユーザーが選択できるようにいくつかのコードを onunload イベントに追加できます。

数日前に setCapture メソッドをある領域で使用することを知りました。 IE ドキュメントの Onclick または onmouse*** およびその他の関連するマウス イベント メソッドを書き込むと、マウスが IE の外に移動した場合でも、それをキャプチャできます。特定の div の onclick イベント このとき、閉じるボタンをクリックすると、releaseCapture メソッドの逆で、マウス モニターを解放します。 >この機能を使用すると、IE のウィンドウの終了やその他の破壊的な操作を遅らせることができます。一部の重要な操作は、破壊的な操作が実行される前に処理できます。
残念なことに、setCapture と releaseCapture は、onmousedown のみをサポートしていません。 、onmouseup、onmousemove、onclick、ondblclick、onmouseover、onmouseout など マウス イベントは機能します。

次に、div 要素 divMain のコンテンツを保護する場合の簡単な例を示します。 divMain で setCapture メソッドを実行します:
document.getElementById(" divMain").setCapture();
2. setCapture と releaseCapture を切り替えるボタン btnChange を追加し、グローバル変数
var isFreeze を定義します。 = true;
3. btnChange の onclick イベントに、次のコードを追加します。



コードをコピーします。 コードは次のとおりです。 function change_capture(obj) {
isFreeze = !isFreeze;
if(isFreeze) {
obj.value = "releaseCapture"; ("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();
}
}
}


本体の onkeydown イベント 次のコードを追加します:



コードをコピー
コードは次のとおりです: function keydown_func() {
if (event.keyCode==115 &&event.altKey) //ALT F4
{
if(isFreeze)
{
alert('保存! '); //実行可能 重要な操作
}
//window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px"); ;
}
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 <BR>} <BR>ドキュメント。 getElementById( "divMain").setCapture(); <BR>} <BR>function change_capture(obj) { <BR>isFreeze = !isFreeze; <BR>if (isFreeze) { <BR>obj.value = "releaseCapture" ; <BR>document.getElementById("divMain").setCapture(); <BR>} else { <BR>obj.value = "setCapture"; '); //重要な操作を実行できます <BR>document.getElementById("divMain").releaseCapture(); <BR>} <BR>} <BR></script> ; <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"> ; 🎜><script language="javascript"> <br>document.getElementById("divMain").setCapture(); <br></div> body> <br></html> <br><br> <br>JavaScript での call 関数と apply 関数の適用について<br>JavaScript のオブジェクト指向アプリケーションでは、次のような問題が発生することがあります。混乱した。実際、関数またはオブジェクト内のこの予約語の値を変更できます。この予約語のデフォルト値はクラス自体です。例: <br><br><br><br><br>コードをコピー <br> </div> <br> コードは次のとおりです: <br><br> <div class="codetitle"><!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <span><html xmlns="http :// www.w3.org/1999/xhtml"> <a style="CURSOR: pointer" data="41286" class="copybut" id="copybut41286" onclick="doCopy('code41286')"><head> <u><meta http-equiv="Content-Type" content="text/html" /> ; </U><script language="javascript"> </u></a>test = { </span>value: 'default', exec: function() { </div>alert(this.value); 🎜>} <div class="codebody" id="code41286">関数 haha​​(obj) { <br>test.exec(); test.exec.apply(obj); <br></script> <br> <body> <br><input type="button" onclick="hh(this);" value="test" /> <br></html> ; <br><br> <br>上記のページを実行するとすぐに理解できます。<br>call 関数と apply 関数は匿名関数を処理できます。<br>クラスの初期化アプリケーションは次のとおりです。 ><br><br> <br>コードをコピー<br><br><br> コードは次のとおりです:<br><br> <br>person = function() { <br>this.Init.apply (this, 引数); </div>} ; <br>person.prototype = { <br>first: null, <br>last: null, <br>Init: function(first, last) { <div class="codetitle">this. first = first; <span>this.last = last; <a style="CURSOR: pointer" data="23532" class="copybut" id="copybut23532" onclick="doCopy('code23532')">}, <u>fullName: function() { </u>return this.first ' ' this.last; </a>fullNameReversed: function() { </span>これを返します ', ' this.first; </div>var s = new Person2('creese', 'yang'); s.fullName()); <div class="codebody" id="code23532">alert(s.fullNameReversed()); <br><br> <br>call 関数と apply 関数は関数の内容を割り当てることができます (匿名パラメーターを使用しますが、トリガーされません)。関数バインディング イベントの適用は次のとおりです: <br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><br> <br> Function.prototype.BindForEvent = function() { <br>var __m = this, object = argument[0], args = new Array(); <br>for(var i = 1; i <arguments.length i>args.push(arguments[i]); <br>} <br>return function(event) { <br>return __m.apply(object, [(event || window.event)].concat (args)); <br>} </arguments.length> </div>} <br> <br> <br>関数バインディングパラメータに関する呼び出し関数と適用関数の適用は次のとおりです: <div class="codetitle"><span><a style="CURSOR: pointer" data="50235" class="copybut" id="copybut50235" onclick="doCopy('code50235')"><u></u>コードをコピー</a></span></div> コードは次のとおりです:<div class="codebody" id="code50235"><div class="codebody" id="code70126"> <br>Function.prototype.Bind = function() { <br>var __m = this, object = argument[0], args = new Array(); <br>for(var i = 1; i < ; 引数.length; i ){ <br>args.push(arguments[i]); <br>return function() { <br>return __m.apply(object, args); <br>} <br><br> <br>call と apply の関数は同じですが、apply の引数は配列形式です。は単数形です。</div></div></a></span></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="jQuery_jqueryで変数に関数を呼び出す方法" href="https://m.php.cn/ja/faq/19052.html">jQuery_jqueryで変数に関数を呼び出す方法</a></span><span>次の記事:<a class="dBlack" title="jQuery_jqueryで変数に関数を呼び出す方法" href="https://m.php.cn/ja/faq/19054.html">jQuery_jqueryで変数に関数を呼び出す方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>