files/zh-tw/web/api/globaleventhandlers/onclick/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

---
title: GlobalEventHandlers.onclick
slug: Web/API/GlobalEventHandlers/onclick
tags:
  - API
  - HTML DOM
  - Property
  - Reference
translation_of: Web/API/GlobalEventHandlers/onclick
---
<div>
<div>{{ ApiRef("HTML DOM") }}</div>
</div>

<div> </div>

<p><strong>onclick</strong> 屬性回傳當前元件 <code>click</code> 事件處理器的程式碼（event handler code）。</p>

<div class="note"><strong>注意:</strong> 當使用 <code>click</code> 事件觸發動作時，同時考慮將此動作加到 <code>keydown</code> 事件中，讓沒使用滑鼠或使用觸控螢幕的使用者也可以進行此動作。</div>

<h2 id="Syntax" name="Syntax">語法</h2>

<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
</pre>

<p>此處的 <em>functionRef</em> 為一個函式－通常是函式的名字或是<em>函式表示式</em>（function expression）<em>。</em> 見 "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>" 來了解更多。</p>

<p>傳入事件處理函式（event handler function）的唯一引數為 {{domxref("MouseEvent")}} 物件。在這函式中，<code>this</code> 為觸發此事件的元件。</p>

<h2 id="Example" name="Example">範例</h2>

<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;onclick event example&lt;/title&gt;
    &lt;script&gt;
      function initElement() {
        var p = document.getElementById("foo");
        // NOTE: showAlert(); or showAlert(param); will NOT work here.
        // Must be a reference to a function name, not a function call.
        p.onclick = showAlert;
      };

      function showAlert(event) {
        alert("onclick Event detected!");
      }
    &lt;/script&gt;
    &lt;style&gt;
      #foo {
        border: solid blue 2px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="initElement();"&gt;
    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
    &lt;p&gt;click on the above element.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>你也可以使用如下的匿名函式：</p>

<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
</pre>

<h2 id="Notes" name="Notes">備註</h2>

<p>使用者點擊元件時會觸發 <code>click</code> 事件。<code>click</code> 事件發生在 <code>mousedown</code> 及 <code>mouseup</code> 事件之後。</p>

<p>這個屬性同一時間中只能指定一個 <code>click</code> 處理器（handler）。你也許會比較想使用 {{domxref("EventTarget.addEventListener()")}}，因為它有更多的彈性而且是 DOM 事件規範的一部份。</p>

<h2 id="Specification" name="Specification">規範</h2>

<table class="spectable standard-table">
 <tbody>
  <tr>
   <th scope="col">規範</th>
   <th scope="col">狀態</th>
   <th scope="col">備註</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>