Javascript ドラッグアンドドロップシリーズ記事 3 - イベントオブジェクトの詳細ページ 1/4

Javascript ドラッグアンドドロップシリーズ記事 3 - イベントオブジェクトの詳細ページ 1/4_Javascript スキル

PHP中文网

リリース： 2016-05-16 19:00:29

オリジナル

990 人が閲覧しました

この記事を読む前に、まず「JavaScript ドラッグアンドドロップシリーズの記事 2: offsetLeft、offsetTop、offsetWidth、offsetHeight のプロパティ」を読んで文脈を明確にしてください。
さて、本題に入りましょう。
モデルの同じ属性/メソッド
1 ボタン属性
整数型、読み取りおよび書き込み可能。特定のマウスイベントについては、押されたマウスボタンを表し、ドラッグ時にマウスの左ボタンがマウスダウンイベントをトリガーするかどうかを決定できます。そのすべての値とその意味 (「Javascript Advanced Programming」から参照) さて、本題に移りましょう。
3.1 e/window.Event オブジェクトのプロパティ/メソッド
3.1.1 IE イベントモデルと DOM イベントは次のとおりです:
0-ボタンが押されていません
1-左ボタンが押されました
2・右ボタンを押す
3・左右のボタンを同時に押す
4・真ん中のボタンを押す
5・左ボタンと真ん中のボタンを押す
6・右ボタンと右ボタンを押す中央のボタン
7 左、中、右のボタンを同時に押します
Mouseup の button 属性によって返される値は、mousedown イベントの値とまったく同じです。

注: DOM イベントモデルと互換性のあるすべてのブラウザでは、0 は左ボタンを押すことを意味し、値 1 は存在しません。2 は右ボタンを押すことを意味します。マウス以外のイベントの場合、「未定義」は戻ってきました。

2 clientX、clientY 属性
これら 2 つの属性の型は整数、単位はピクセルで、読み取りと書き込みが可能です。関連するイベントが発生したときのブラウザのクライアント領域(ツールバー、スクロールバーなどを除く)のマウスのx座標とy座標をそれぞれ表します。画像を使って説明するのが最善です。以下を参照してください。

図 3.1: clientX 属性と clientY 属性

以下コードは次のとおりです。非常に単純な例で、いつでもマウスの座標を配置し、その結果を 2 つのテキストボックスに表示できます。これは、最新のすべてのブラウザと互換性があります。

サンプルコード 1:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><span style="COLOR: #0000ff"><!</span><span style="COLOR: #ff00ff">DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>  </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>    </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">meta </span><span style="COLOR: #ff0000">http-equiv</span><span style="COLOR: #0000ff">="Content-Type"</span><span style="COLOR: #ff0000"> content</span><span style="COLOR: #0000ff">="text/html; charset=UTF-8"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><span style="COLOR: #000000"><br>    </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000">Untitled Document</span><span style="COLOR: #0000ff"><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>    </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">style </span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/css"</span><span style="COLOR: #0000ff">></span><span style="COLOR: #800000; BACKGROUND-COLOR: #f5f5f5"><br><br>       body</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">{</span><span style="COLOR: #ff0000; BACKGROUND-COLOR: #f5f5f5"><br>         border</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">:</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">1px solid black</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;</span><span style="COLOR: #ff0000; BACKGROUND-COLOR: #f5f5f5"><br>        margin</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">:</span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">0px</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">;</span><span style="COLOR: #ff0000; BACKGROUND-COLOR: #f5f5f5"><br>       </span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">}</span><span style="COLOR: #800000; BACKGROUND-COLOR: #f5f5f5"><br>    </span><span style="COLOR: #0000ff"><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>    </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">script </span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text/javascript"</span><span style="COLOR: #ff0000"> language</span><span style="COLOR: #0000ff">="JavaScript"</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"><br>    document.onmousemove</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">move;<br>    </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">function</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> move(e){<br>      </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">if</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">!</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">e)<br>      {<br>        e</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">window.event;<br>      }<br>      </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> xElement</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.getElementById(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">x</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>      </span><span style="COLOR: #0000ff; BACKGROUND-COLOR: #f5f5f5">var</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5"> yElement</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">document.getElementById(</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">y</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">"</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">);<br>      xElement.value</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">e.clientX;<br>      yElement.value</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">=</span><span style="COLOR: #000000; BACKGROUND-COLOR: #f5f5f5">e.clientY;<br><br>    }<br>    </span><span style="COLOR: #0000ff"><span style="COLOR: #800000">script</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>  </span><span style="COLOR: #0000ff"><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>  </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br>  </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">input </span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text"</span><span style="COLOR: #ff0000"> id</span><span style="COLOR: #0000ff">="x"</span><span style="COLOR: #ff0000"> value</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><span style="COLOR: #000000"><br>  </span><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">input </span><span style="COLOR: #ff0000">type</span><span style="COLOR: #0000ff">="text"</span><span style="COLOR: #ff0000"> id</span><span style="COLOR: #0000ff">="y"</span><span style="COLOR: #ff0000"> value</span><span style="COLOR: #0000ff">=""</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><span style="COLOR: #000000"><br>  </span><span style="COLOR: #0000ff"><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><span style="COLOR: #000000"><br></span><span style="COLOR: #0000ff"><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">><br><br><br><br><br><br><br></span>3 type属性<br><p class="pagenum tc"><br></p></span></span></span></span></span></span>

ログイン後にコピー