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(),因為它有更多的彈性而且是 DOM 事件規範的一部份。

規範

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

瀏覽器相容性

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 ? ? ? ? ? ? ? ?

文件標籤與貢獻者

 此頁面的貢獻者: StanleyDing
 最近更新: StanleyDing,