click

click 事件通常會在設備的按鈕(通常是滑鼠按鍵)點擊元素時執行。

基本資料

詳述
DOM L3
介面
MouseEvent
Bubbles
Yes
Cancelable
Yes
Target
網頁元素
Default Action
Varies

Properties

Specification
UI Events
# event-type-click

範例

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // 在 “clicked div”顯示點擊次數
    event.target.innerHTML = "click count: " + event.detail;
  }, false);
</script>

Browser compatibility

Internet Explorer

Internet Explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events. Any click events will be fired at the underlying element(s) instead. See this live example for a demonstration.

Known workarounds for this bug:

Safari Mobile

Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. <div>) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".

Known workarounds for this bug:

  • Set cursor: pointer; on the element or any of its ancestors.
  • Add a dummy onclick="" attribute to the element or any of its ancestors up to but not including <body> (en-US).
  • Use a typically interactive element (e.g. <a>) instead of one that isn't typically interactive (e.g. <div>).
  • Stop using click event delegation.

Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):

關聯事件