onclick 事件
描述
当用户单击 HTML 元素时，将发生onclick事件。
鼠标事件
| 事件 | 发生时间 |
|---|---|
| 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>
function myFunction(element, color) {
element.style.color = color;
}
</script>
自己尝试 »
单击以将文本从一个输入字段复制到另一个输入字段
<button onclick="myFunction()">复制文本</button>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
自己尝试 »
如何为 window 对象分配 "onclick" 事件
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 |
