そのため、タスク：マウスホイールを特定のブロック上でスクロールするイベントへの反応を実装します。つまり、ブラウザーウィンドウの「ネイティブ」スクロールに触れることはありません。 実装はクロスブラウザである必要があり、フレームワークを使用しないでください。
今後、この実験は成功し、最終結果はIE7以降のすべてのデスクトップブラウザーで機能します（理論的には6番目に機能するはずですが、今では確認する方法はありません）。 また、Googleの検索エンジンに感謝します。 彼女がいなければ、人生は落胆と絶望から生まれるでしょう。
最初に、ウィンドウ全体（ウィンドウオブジェクト）でonmousewheelをキャッチする問題を解決しました。 次のように決定されました。
window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; }
最初の行はFirefoxおよび中国語のWebブラウザー（Chrome、Safari）でイベントをキャッチし、2行目はOperaおよびIEでの釣りに必要です。 イベントに対する反応はmouse_wheel（）関数で、これまでのところ次のようになっています。
var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; }
最初の行ですべてが明確です-これはIEの松葉杖です。 2行目について詳しく説明します。 その中で、ホイールが回転する方向を決定します。 Firefoxを除くすべてのブラウザーは、ホイールが回転している場所に応じて、wheelDeltaプロパティの方向を120または-120に渡します。 一方、Mozillaはdetailプロパティで動作し、値-3または3をそれぞれ割り当てます。 はい、正確に、記号は一致しません。 したがって、2行目では、さまざまなブラウザーのデータを、ホイールが（自分自身から）回転している場合は+1に、ホイールが（自分自身に向かって）回転している場合は-1にしています。 さて、私はコンドームを「||」の形でつけました false」核戦争またはその他のエキゾチックなものの場合。
プログラムは少なくとも完了しています。 すべてのブラウザーでマウスホイールのスクロールイベントをキャッチし、ホイールが回転している方向を認識します。 さらに進んでいます。
ここで、特定のブロックでこのイベントをキャッチし、既に何かを行う必要があります。 これは、たとえば、コンテンツの同じスクロールや、プレーヤーの音量調節などです。 例として、赤、緑、青のコンポーネントの値を設定する一種のカラーピッカーを作成し、対応するブロック上でホイールをスクロールすることにしました。 つまり、次のようなものです。
私は、最も単純で少しでもコンドミニアムの方法で行動することにしました。特定のブロックのonmouseoverイベント中に事前に定義された特定の関数が割り当てられるグローバル変数wheel_handle（nullまたは別のfalseのようなデフォルト値）を設定しました。 onmousewheelがトリガーされると、関数が実行され、スクロールの方向がパラメーターとして転送されます。 コードは次のようになり始めました。
var wheel_handle = null; var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { wheel_handle(direction); } } var set_handle = function(id, func) { document.getElementById(id).onmouseover = function() { wheel_handle = func; } document.getElementById(id).onmouseout = function() { wheel_handle = null; } } window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; }
原則として、万が一のためにすべてを明確にする必要があります。 mouse_wheel関数は、方向と「function」タイプのwheel_handleが存在する場合、wheel_handleに割り当てられている関数を実行します。 set_handle関数は、どのブロックをどの関数を実行するかを決定します。 つまり、私の例では、設計を少し先に進めて
set_handle("r", set_red);
これは、識別子「r」のブロックの上にマウスを置くと、変数wheel_handleにset_red関数が割り当てられ、onmousewheelイベントの場合はdirectionパラメーターで実行されることを意味します。
私は例を作成します：
<!DOCTYPE html> <html> <head> <style type="text/css"> #r { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height: 100px; background: #000; } #g { position: absolute; left: 120px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; } #b { position: absolute; left: 230px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; } #result { position: absolute; left: 10px; top: 120px; width: 320px; height: 100px; background: #000; } </style> <script type="text/javascript"> var wheel_handle = null; var rgb = { r: 0, g: 0, b: 0, result: 0 } var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { wheel_handle(direction); } } var set_handle = function(id, func) { document.getElementById(id).onmouseover = function() { wheel_handle = func; }; document.getElementById(id).onmouseout = function() { wheel_handle = null; }; } var set_red = function(direction) { rgb.r += direction; if (rgb.r < 0) rgb.r = 0; if (rgb.r > 255) rgb.r = 255; document.getElementById("r").innerHTML = rgb.r; document.getElementById("r").style.backgroundColor = "rgb(" + rgb.r + ", 0, 0)"; set_result(); } var set_green = function(direction) { rgb.g += direction; if (rgb.g < 0) rgb.g = 0; if (rgb.g > 255) rgb.g = 255; document.getElementById("g").innerHTML = rgb.g; document.getElementById("g").style.backgroundColor = "rgb(0, " + rgb.g + ", 0)"; set_result(); } var set_blue = function(direction) { rgb.b += direction; if (rgb.b < 0) rgb.b = 0; if (rgb.b > 255) rgb.b = 255; document.getElementById("b").innerHTML = rgb.b; document.getElementById("b").style.backgroundColor = "rgb(0, 0, " + rgb.b + ")"; set_result(); } var set_result = function() { document.getElementById("result").style.backgroundColor = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")"; } window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; set_handle("r", set_red); set_handle("g", set_green); set_handle("b", set_blue); } </script> </head> <body style="height: 1000px;"> <div id="r">0</div> <div id="g">0</div> <div id="b">0</div> <div id="result"></div> </body> </html>
set_ *という形式の関数は明らかであり、私の意見では、コメントは必要ありません。 ただし、bodyタグのスタイルに注意する必要があります。 ページが画面に収まることが保証されず、独自のスクロールバーがあるように、1000ピクセルの高さを設定します。 このフォームで例を実行すると、ブロックのonmousewheelイベントは機能しますが、同時にページ自体が下にスクロールします。 問題のステートメントを再度読み、mouse_wheel（）関数に小さな行を入れます。
var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { if (event.preventDefault) event.preventDefault(); event.returnValue = false; wheel_handle(direction); } }
ここでは、イベントをキャンセルするにはpreventDefault（）が必要です。 とにかく、彼はイベントをキャンセルする必要があります。 一般的に、私は少しGoogleを引用します：
イベントを元に戻すことができる場合、イベントオブジェクトのpreventDefault（）メソッドを使用してイベントをキャンセルします。 つまり、特定の実装で実行されるアクションは、このイベントが発生したときに実行されません。 preventDefault（）メソッドがイベントの開発のいずれかの段階で呼び出されると、イベントはキャンセルされます。 デフォルトでこのイベントによって実行されるアクションは実行されません。 元に戻すことができないイベントに対してこのメソッドを呼び出しても、イベントの以降の実行には影響しません。 呼び出し後、preventDefault（）メソッドは、イベントがさらに伝播される間、有効になります。 preventDefault（）メソッドは、イベントストリームの任意のフェーズで呼び出すことができます。
event.returnValueは、preventDefault（）を認識しないIE用です。
イベントに対する自然な反応をキャンセルしました-機能を実行します。 Windowsでは、8番目のFirefoxで、preventDefault（）が常に正しく機能するとは限らないことに注意しました。 おそらく、これはいくつかのonmouseenter固有のものです。これは、カーソルがブロック内のテキストにあるときに誤った操作が発生することに気づいたためです。 誰かがこれらの災害に気づいているなら、啓発してください-ここでGoogleは助けませんでした。
しかし、一般に、それですべてです。 完全なコピーアンドペーストのソースコード：
<!DOCTYPE html> <html> <head> <style type="text/css"> #r { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height: 100px; background: #000; } #g { position: absolute; left: 120px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; } #b { position: absolute; left: 230px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; } #result { position: absolute; left: 10px; top: 120px; width: 320px; height: 100px; background: #000; } </style> <script type="text/javascript"> var wheel_handle = null; var rgb = { r: 0, g: 0, b: 0, result: 0 } var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { if (event.preventDefault) event.preventDefault(); event.returnValue = false; wheel_handle(direction); } } var set_handle = function(id, func) { document.getElementById(id).onmouseover = function() { wheel_handle = func; } document.getElementById(id).onmouseout = function() { wheel_handle = null; } } var set_red = function(direction) { rgb.r += direction; if (rgb.r < 0) rgb.r = 0; if (rgb.r > 255) rgb.r = 255; document.getElementById("r").innerHTML = rgb.r; document.getElementById("r").style.backgroundColor = "rgb(" + rgb.r + ", 0, 0)"; set_result(); } var set_green = function(direction) { rgb.g += direction; if (rgb.g < 0) rgb.g = 0; if (rgb.g > 255) rgb.g = 255; document.getElementById("g").innerHTML = rgb.g; document.getElementById("g").style.backgroundColor = "rgb(0, " + rgb.g + ", 0)"; set_result(); } var set_blue = function(direction) { rgb.b += direction; if (rgb.b < 0) rgb.b = 0; if (rgb.b > 255) rgb.b = 255; document.getElementById("b").innerHTML = rgb.b; document.getElementById("b").style.backgroundColor = "rgb(0, 0, " + rgb.b + ")"; set_result(); } var set_result = function() { document.getElementById("result").style.backgroundColor = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")"; } window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; set_handle("r", set_red); set_handle("g", set_green); set_handle("b", set_blue); } </script> </head> <body style="height: 1000px;"> <div id="r">0</div> <div id="g">0</div> <div id="b">0</div> <div id="result"></div> </body> </html>
実例へのリンク
NB！ 尊敬されているコメンテーターのアドバイスによって補完された、実例へのリンク
-「マジック定数」へのバインドを修正。
-処理する呼び出しのコンテキストを指定する機能を追加しました。バインディング関数はmousewheel.set_wheel_handle（id、func、context）のようになりました。
-onmousewheelに関連するすべてのものは、Mousewheel.jsライブラリにラップされています。
そして、実際には、オニオンスープはそれと何の関係がありますか？ まあまず 。 そして、第二に、私はあなたがどのようであるかわかりません、そして、ここモスクワで霜が私を襲いました。 -10、もちろん、耐えられますが、不運な風邪が今満開で咲きます。 不快な、同意しますか？
ルーアン風の温かい香りのタマネギのスープよりも、あらゆる種類の風邪を予防するためのより良い治療法はわかりません。
- ブイヨンに必要なものはすべて、オーブンに50〜60分間入れました。赤玉ねぎ、大きなニンジン、セロリの根、ニンニクの頭、そしてもちろん、肉-おいしい牛肉と大きな骨。
- タマネギ、普通のタマネギ、またはシャロット-かなり多く、800グラム、キログラム-をカットし、加熱した厚い鋳鉄製の鍋または釜に入れます。そこで、150-200グラムのバターを事前に溶かし、熱を最小限に抑えて、定期的に3時間加熱しますかき混ぜる
- 私はスープを調理します-堅いコンソメ、2リットルの冷水（！）でオーブンで焼いたものすべてを注ぎ、最小限の火にかけます。 それは実際には沸騰しないはずです：中央に2つまたは3つの泡-そしてそれで十分です。 沸騰が激しい場合は、ひしゃくですくい、高さから戻します。
- （3時間で）タマネギがほぼ均一になり、ミルクチョコレートの色が変わったら、白ワインを1杯注ぎ、沸騰させて、煮込んだ煮汁を注ぎます。 また、この段階で、100グラムのソフトクリームチーズを1グラム追加できますが、これは必須ではありません。
- 約30分後にクリーム200グラムを加え、小麦粉をスプーン1杯の水にスプーン1杯の小麦粉を注いだ後、完全に混ぜます：スープはほぼ均一になるはずです（疑わしい場合は、ハンドブレンダーで思い浮かぶことができます）、挽いたコショウとハーブを加え、完全に調理する必要があります少し-タイム、ローズマリー、ベイリーフ、またはガルニの花束全体。
- さらに20分でスープの準備ができました。ベイリーフを取り出して捨て、残りをクルトンと細かく刻んだレンネットチーズの入ったセラミックまたは粘土の深皿で提供します。 クルトン-プレート、チーズ-別に。
全般的にボナペティ。 もちろん、準備には少なくとも4時間かかりますが、結果には価値があります。 そして一般的に、シェフとプログラマーの間には多くの類似点が見られますが、Habraumorでは次回、そしておそらくすべて同じようになります。
病気にならないでください！