GlobalEventHandlers.onclick

 

onclick 屬性回傳當前元件 click 事件處理器的程式碼(event handler code)。

注意: 當使用 click 事件觸發動作時,同時考慮將此動作加到 keydown 事件中,讓沒使用滑鼠或使用觸控螢幕的使用者也可以進行此動作。

語法

element.onclick = functionRef;

此處的 functionRef 為一個函式-通常是函式的名字或是函式表示式(function expression) 見 "JavaScript Guide:Functions" 來了解更多。

傳入事件處理函式(event handler function)的唯一引數為 MouseEvent 物件。在這函式中,this 為觸發此事件的元件。

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>onclick event example</title>
    <script>
      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!");
      }
    </script>
    <style>
      #foo {
        border: solid blue 2px;
      }
    </style>
  </head>
  <body onload="initElement();">
    <span id="foo">My Event Element</span>
    <p>click on the above element.</p>
  </body>
</html>

你也可以使用如下的匿名函式:

p.onclick = function(event) { alert("moot!"); };

備註

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

這個屬性同一時間中只能指定一個 click 處理器(handler)。你也許會比較想使用 EventTarget.addEventListener() (en-US),因為它有更多的彈性而且是 DOM 事件規範的一部份。

規範

規範 狀態 備註
HTML Living Standard
The definition of 'onclick' in that specification.
Living Standard  

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) ? ? ? ?
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ? ? ?