onclick 事件
描述
onclick 事件在使用者點選 HTML 元素時發生。
滑鼠事件
| 事件 | 發生時間 |
|---|---|
| onclick | 使用者點選元素 |
| oncontextmenu | 使用者右鍵點選元素 |
| ondblclick | 使用者雙擊元素 |
| onmousedown | 滑鼠按鈕在元素上被按下 |
| onmouseenter | 指標移入元素 |
| onmouseleave | 指標移出元素 |
| onmousemove | 指標在元素上移動 |
| onmouseout | 滑鼠指標移出元素 |
| onmouseover | 滑鼠指標移到元素上 |
| onmouseup | 滑鼠按鈕在元素上被釋放 |
另請參閱
教程
語法
技術詳情
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 事件型別 | MouseEvent |
| 支援 HTML 標籤 |
除以下元素外所有元素都支援：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 和 <title> |
更多示例
點選 <button> 顯示日期
<button onclick="getElementById('demo').innerHTML = Date()">現在幾點了？</button>
自己動手試一試 »
點選 <h3> 元素來改變文字顏色
<h3 id="demo" onclick="myFunction()">點選我來改變我的顏色。</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
自己動手試一試 »
另一個改變元素顏色的例子
<h3 onclick="myFunction(this, 'red')">點選我來改變我的顏色。</h3>
<script>
函式 myFunction(element, color) {
element.style.color = color;
}
</script>
自己動手試一試 »
點選從一個輸入欄位複製文字到另一個欄位
<button onclick="myFunction()">複製文字</button>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
自己動手試一試 »
如何將 "onclick" 事件分配給 window 物件
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
自己動手試一試 »
使用 onclick 建立下拉選單
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
自己動手試一試 »
瀏覽器支援
onclick 是 DOM Level 2 (2001) 的一個特性。
所有瀏覽器都完全支援。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
