新手提问，关于鼠标事件执行顺序的问题
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
<!--
body {
background-color: #CCCCCC;
}
.txet {
background-color: #cccccc;
}
.mybutton {
font-family: "新宋体 ";
font-size: 9pt;
}
-->
</style>
<script language= "javascript ">
<!--
var num_hjj = 0;
var num_zjl = 0;
var num_hgz = 0;
var num_lxp = 0;
var num_zsh = 0;
var num_syz = 0;
var seconds = 0;
var minutes = 0;
var hours = 0;
//改变
function change_hjj(){
var total = num_hjj + num_hgz + num_lxp + num_zsh + num_syz + num_zjl;
document.getElementById( "line_hjj ").style.width = ((num_hjj/(total))*100)+ "% ";
document.mx.hjj_tj.value = Math.round((num_hjj/(total))*100)+ "% ";
return ;
}
function change_zjl(){
var total = num_hjj + num_hgz + num_lxp + num_zsh + num_syz + num_zjl;
document.getElementById( "line_zjl ").style.width = ((num_zjl/(total))*100)+ "% ";
document.mx.zjl_tj.value = Math.round((num_zjl/(total))*100)+ "% ";
return ;
}
function change_hgz(){
var total = num_hjj + num_hgz + num_lxp + num_zsh + num_syz + num_zjl;
document.getElementById( "line_hgz ").style.width = ((num_hgz/(total))*100)+ "% ";
document.mx.hgz_tj.value = Math.round((num_hgz/(total))*100)+ "% ";
return ;
}
function change_lxp(){
var total = num_hjj + num_hgz + num_lxp + num_zsh + num_syz + num_zjl;
document.getElementById( "line_lxp ").style.width = ((num_lxp/(total))*100)+ "% ";
document.mx.lxp_tj.value = Math.round((num_lxp/(total))*100)+ "% ";
return ;
}
function change_zsh(){
var total = num_hjj + num_hgz + num_lxp + num_zsh + num_syz + num_zjl;
document.getElementById( "line_zsh ").style.width = ((num_zsh/(total))*100)+ "% ";
document.mx.zsh_tj.value = Math.round((num_zsh/(total))*100)+ "% ";
return ;
}
function change_syz(){
var total = num_hjj + num_hgz + num_lxp + num_zsh + num_syz + num_zjl;
document.getElementById( "line_syz ").style.width = ((num_syz/(total))*100)+ "% ";
document.mx.syz_tj.value = Math.round((num_syz/(total))*100)+ "% ";
return ;
}
//增加
function click_hjj(){
document.mx.hjj.value = "黄家驹( "+(++num_hjj)+ ") ";
change_hjj();
}
function click_zjl(){
document.mx.zjl.value = "周杰伦( "+(++num_zjl)+ ") ";
change_zjl();
}
function click_hgz(){
document.mx.hgz.value = "黄贯中( "+(++num_hgz)+ ") ";
change_hgz();
return ;
}
function click_lxp(){
document.mx.lxp.value = "林晓培( "+(++num_lxp)+ ") ";
change_lxp();
return ;
}
function click_zsh(){
document.mx.zsh.value = "张韶涵( "+(++num_zsh)+ ") ";
change_zsh();
return ;
}
function click_syz(){
document.mx.syz.value = "孙燕姿( "+(++num_syz)+ ") ";
change_syz();
return ;
}
function intime(){
for (; ; )
{
seconds++;
if (seconds == 60)
{
minutes++;
seconds = 0;
}
if (minutes == 60)
{
hours++;
minutes = 0;
}
if (hours == 24)
{
hours = 0;
}
break;
}
document.mx.stop_time.value = hours + ": " + minutes + ": " + seconds;
var clock = setTimeout ( "intime() ",1000);
}
-->
</script>
</head>
<body onload= "intime() ">
<p align= "center " style= "color:#0033FF;font-size:24px; " > 请选择你喜欢的明星 </p>
<hr width= "100% " />
<form id= "mx " name= "mx " method= "post " action= " ">
<table width= "730 " height= "350 " border= "1 " align= "center " cellpadding= "0 " cellspacing= "0 " bordercolor= "#999999 ">
<tr height= "50 ">
<td align= "center "> <input class= "mybutton " name= "hjj " type= "button " id= "hjj " value= "黄家驹 " onmouseup= "click_hjj() " onclick= "change_zjl(),change_hgz(),change_lxp(),change_zsh(),change_syz() "/> </td>
<td width= "650 ">
<img src= "line.gif " alt= "统计条 " name= "line_hjj " width= "0% " height= "20 " align= "left " id= "line_hjj " />
<input class= "txet " name= "hjj_tj " type= "text " id= "hjj_tj " size= "2 " maxlength= "2 " disabled= "disabled "/> </td>
</tr>
<tr height= "50 ">
<td align= "center "> <input class= "mybutton " name= "zjl " type= "button " id= "zjl " value= "周杰伦 "
onmouseup= "click_zjl() " onclick= "change_hjj(),change_hgz(),change_lxp(),change_zsh(),change_syz() "/> </td>
<td width= "650 ">
<img src= "line.gif " alt= "统计条 " name= "line_zjl " width= "0% " height= "20 " align= "left " id= "line_zjl " />
<input class= "txet " name= "zjl_tj " type= "text " id= "zjl_tj " size= "2 " maxlength= "2 " disabled= "disabled "/> </td>
</tr>
<tr height= "50 ">
<td align= "center "> <input class= "mybutton " name= "hgz " type= "button " id= "hgz " value= "黄贯中 " onmouseup= "click_hgz() " onclick= "change_hjj(),change_zjl(),change_lxp(),change_zsh(),change_syz() "/> </td>
<td width= "650 ">
<img src= "line.gif " alt= "统计条 " name= "line_hgz " width= "0% " height= "20 " align= "left " id= "line_hgz " />
<input class= "txet " name= "hgz_tj " type= "text " id= "hgz_tj " size= "2 " maxlength= "2 " disabled= "disabled "/> </td>
</tr>
<tr height= "50 ">
<td align= "center "> <input class= "mybutton " name= "lxp " type= "button " id= "lxp " value= "林晓培 " onmouseup= "click_lxp() " onclick= "change_hjj(),change_zjl(),change_hgz(),change_zsh(),change_syz() "/> </td>
<td width= "650 ">
<img src= "line.gif " alt= "统计条 " name= "line_lxp " width= "0% " height= "20 " align= "left " id= "line_lxp " />
<input class= "txet " name= "lxp_tj " type= "text " id= "lxp_tj " size= "2 " maxlength= "2 " disabled= "disabled "/> </td>
</tr>
<tr height= "50 ">
<td align= "center "> <input class= "mybutton " name= "zsh " type= "button " id= "zsh " value= "张韶涵 " onmouseup= "click_zsh() " onclick= "change_hjj(),change_zjl(),change_lxp(),change_hgz(),change_syz() "/> </td>
<td width= "650 ">
<img src= "line.gif " alt= "统计条 " name= "line_zsh " width= "0% " height= "20 " align= "left " id= "line_zsh " />
<input class= "txet " name= "zsh_tj " type= "text " id= "zsh_tj " size= "2 " maxlength= "2 " disabled= "disabled "/> </td>
</tr>
<tr height= "50 ">
<td align= "center "> <input class= "mybutton " name= "syz " type= "button " id= "syz " value= "孙燕姿 " onmouseup= "click_syz() " onclick= "change_hjj(),change_zjl(),change_lxp(),change_zsh(),change_hgz() "/> </td>
<td width= "650 ">
<img src= "line.gif " alt= "统计条 " name= "line_syz " width= "0% " height= "20 " align= "left " id= "line_syz " />
<input class= "txet " name= "syz_tj " type= "text " id= "syz_tj " size= "2 " maxlength= "2 " disabled= "disabled "/> </td>
</tr>
</table>
<div align= "center " style= "background-color:#CCCCCC; font-size:24px; color:#9900CC; font-family:宋体; "> 您在本站逗留的时间为
<input name= "stop_time " type= "text " disabled= "disabled " id= "stop_time " size= "5 " maxlength= "5 " style= "background-color:#CCCCCC; font-size:24px; color:#000000; font-family:宋体; "/>
</div>
</form>
</body>
</html>
[解决办法]
在浏览器中各种 HTML 元素的事件执行顺序是固定的，没什么可奇怪的。
至于刷新后不回 0 的问题属于程序设计问题，与 JS 无关，具体说应该是初始化不完全。
三个常用鼠标事件执行顺序如下：
1 onmousedown
2 onmouseup
3 onclick
示例代码如下，L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> button event sequence </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for csdn " />
</head>
<body>
<input type= "button " id= "btnShow " value= "Show Event Sequence " /> <br />
<span id= "spaOutput "> </span>
<script type= "text/javascript ">
<!--
var oShow = document.getElementById( "btnShow ");
var oOutput = document.getElementById( "spaOutput ");
var breakLine = " <br /> ";
oShow.onclick = function ()
{
oOutput.innerHTML += "onclick " + breakLine;
};
oShow.onmouseup = function ()
{
oOutput.innerHTML += "onmouseup " + breakLine;
};
oShow.onmousedown = function ()
{
oOutput.innerHTML += "onmousedown " + breakLine;
};
//-->
</script>
</body>
</html>
