您的位置：首页 > 其它

onmousedown,onmouseup,onclick同时应用于一个标签节点Element

2016-05-08 14:07 369 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>

<script>
function downClick(){
console.log("onmousedown");
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="red";
}
function upClick(){
console.log("onmouseup");
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="blue";
}
function reClick(){
console.log("onclick");
var woaixuexi = document.getElementById("woaixuexi");
woaixuexi.style.background="green";
}
</script>

</head>
<body>
<div id="woaixuexi" onmousedown="downClick();" onmouseup="upClick();" onclick="reClick();" class="xuexi"></div>
</body>
</html>

代码分析：

1、当onmousedown,onmouseup,onclick同时作用在一个元素节点上时，执行的顺序依次为onmousedown,onmouseup,onclick;

2、onmousedown：是在鼠标按下之后触发的事件；

onmouseup:鼠标抬起时触发的事件;

onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）onclick = onmousedown + onmouseup;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航