mousedown、mouseup、click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况下后面两个事件也肯定会被激活
mousemove 事件在是一直在元素上运行的(如果加上的话)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<title>mousedown mouseup click触发顺序</title>
</head>
<body>
<div id="div1"
onmousedown="mouseDownFun();"
onmouseup="mouseUpFun();"
onclick="clickFun();"
style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px;overflow-y: scroll"></div>
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息"/>
<script type="text/javascript">
var div1 = document.getElementById('div1');
function mouseDownFun() {
div1.innerHTML += Math.random() + '<br/>';
div1.innerHTML += 'mouseDown<br/>';
}
function mouseUpFun() {
div1.innerHTML += 'mouseUp<br/>';
}
function clickFun() {
div1.innerHTML += 'click<br/>';
div1.scrollTop = div1.scrollHeight; //滚动到底部
}
</script>
</body>
</html>