initial commit

1 files changed, 166 insertions, 0 deletions

diff --git a/files/ja/web/api/event/preventdefault/index.html b/files/ja/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..55a6ecff32
--- /dev/null
+++ b/files/ja/web/api/event/preventdefault/index.html
@@ -0,0 +1,166 @@
+---
+title: Event.preventDefault()
+slug: Web/API/Event/preventDefault
+tags:
+  - API
+  - DOM
+  - Event
+  - Method
+  - Reference
+  - イベント
+  - メソッド
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{apiref("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Event")}} インターフェースの <strong><code>preventDefault()</code></strong> メソッドは、{{Glossary("user agent", "ユーザーエージェント")}}に、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。</span>このイベントは通常、イベントリスナーの1つが {{domxref("Event.stopPropagation", "stopPropagation()")}} または {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。</p>
+
+<p>以下にある通り、<code><strong>preventDefault()</strong></code> をキャンセル不可のイベントのために呼び出すと、例えば {{domxref("EventTarget.dispatchEvent()")}} を<code>cancelable: true</code> の指定なく呼び出した場合、効果がありません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>event</em>.preventDefault();
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Blocking_default_click_handling" name="Blocking_default_click_handling">既定のクリック処理のブロック</h3>
+
+<p>チェックボックスのクリック時、既定の動作ではチェックボックスが切り替わります。この既定の動作を止める方法を以下に示します。</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Sorry! &lt;code&gt;preventDefault()&lt;/code&gt; won't let you check this!&lt;br&gt;";
+         event.preventDefault();
+}, false);</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Please click on the checkbox control.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="id-checkbox"&gt;Checkbox:&lt;/label&gt;
+  &lt;input type="checkbox" id="id-checkbox"/&gt;
+&lt;/form&gt;
+
+&lt;div id="output-box"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>
+
+<h3 id="Stopping_keystrokes_from_reaching_an_edit_field" name="Stopping_keystrokes_from_reaching_an_edit_field">キーストロークが編集フィールドに到達するのを止める</h3>
+
+<p>次の例は無効なテキスト入力が入力フィールドに到達するのを <code>preventDefault()</code> で止める方法を示しています。今日では、<a href="/ja/docs/Learn/HTML/Forms/Form_validation">ネイティブの HTML フォーム検証</a>を代わりに使用する必要があります。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>こちらがフォームです。</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;p&gt;Please enter your name using lowercase letters only.&lt;/p&gt;
+
+  &lt;form&gt;
+    &lt;input type="text" id="my-textbox"&gt;
+  &lt;/form&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>ユーザが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。</p>
+
+<pre class="brush: css notranslate">.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keypress_event", "keypress")}} イベントを待ち受けします。</p>
+
+<pre class="brush: js notranslate">var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+</pre>
+
+<p><code>checkName()</code> 関数は押されたキーを調べ、それを許可するかどうかを決定します。</p>
+
+<pre class="brush: js notranslate">function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode &lt; 97 || charCode &gt; 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Please use lowercase letters only."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+</pre>
+
+<p><code>displayWarning()</code> 関数は問題の通知を表示します。これはエレガントな機能ではありませんが、この例の目的のために仕事をしています：</p>
+
+<pre class="brush: js notranslate">var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // insert warningBox after myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<p>イベントフローのいずれかの段階でイベントをキャンセルする途中で <code>preventDefault()</code> を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。</p>
+
+<p>イベントがキャンセル可能かどうかは {{domxref("event.cancelable")}} を使って確認できます。キャンセル不可能なイベントに対して <code>preventDefault()</code> を呼び出しても効果はありません。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.Event.preventDefault")}}</p>