新手提问，关于鼠标事件执行顺序的有关问题

新手提问，关于鼠标事件执行顺序的问题
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">

</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 ;
}

//增加

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>

新手提问关于鼠标事件执行顺序的有关

热点推荐