<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Table</title>
</head>
<script type="text/javascript">
window.$ = function(id) {
if(typeof id == 'string') {
return document.getElementById(id);
}
return id;
}
var TabClick = function(id, color) {
this.id = id || 'tab';
this.color = color || '#ADD8E6';
this.lastClick = null;
}
TabClick.prototype = {
// 初始化
init : function() {
// 不让选中文本
var agent = navigator.userAgent.toUpperCase();
if(agent.indexOf('MSIE') > 0) {
document.body.onselectstart = function() {return false;}
}else if(agent.indexOf('GECKO') > 0){
document.body.style.MozUserSelect = 'none';
}
this.addClick();
this.cancelSelect();
},
// 为 tr 添加 onclick 事件
addClick : function() {
var rows = this.getRows();
var obj = this;
for(var i = 0; i < rows.length; i++) {
rows[i].defaultBgColor = rows[i].style.backgroundColor;
rows[i].onclick = function(event) {
var e = window.event || event;
obj.cancelBubble(e);
obj.clickEvent(e, this);
if(!e.shiftKey) {
obj.lastClick = this;
}
}
}
},
// 点击页面其他部分时取消所有的选择
cancelSelect : function() {
var obj = this;
document.body.onclick = function() {
obj.clearBgColor();
}
},
// tr click 事件的处理
clickEvent : function(e, row) {
if(!e.ctrlKey) {
this.clearBgColor();
}
if(e.shiftKey) {
this.shiftClick(row);
} else {
this.click(row);
}
},
// 单击某个 tr
click : function(row) {
if(!row.style.backgroundColor) {
row.style.backgroundColor = this.color;
} else {
row.style.backgroundColor = row.defaultBgColor;
}
},
// 去除已选择的 tr
clearBgColor : function() {
var rows = this.getRows();
for(var i = 0; i < rows.length; i++) {
rows[i].style.backgroundColor = rows[i].defaultBgColor;
}
},
// 按下 shift 时的处理
shiftClick : function(row) {
var start = Math.min(this.lastClick.rowIndex, row.rowIndex);
var end = Math.max(this.lastClick.rowIndex, row.rowIndex);;
var rows = this.getRows();
for(var i = start - 1; i < end; i++) {
rows[i].style.backgroundColor = this.color;
}
},
// 获得所有的 tr
getRows : function() {
if(!this.rows) {
this.rows = $(this.id).tBodies[0].rows;
}
return this.rows;
},
// 取消事件冒泡
cancelBubble : function(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else if(!event.cancelBubble) {
event.cancelBubble = true;
}
}
}
window.onload = function() {
var tab = new TabClick('tab');
tab.init();
}
</script>
<style type="text/css">
table#tab {
font-size: 10pt;
font-family: "courier new";
border-collapse: collapse;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
table#tab caption {
font-size: 12pt;
font-weight: bold;
padding-bottom: 10px;
}
table#tab th, table#tab td {
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
width: 200px;
}
table#tab thead tr {
background-color: #FFE4C4;
height: 25px;
}
table#tab th {
text-align: center;
}
table#tab td {
padding: 4px 10px;
}
</style>
<body>
<table id="tab" cellpadding="0" cellspacing="0">
<caption>event 对象的属性</caption>
<thead>
<tr>
<th>属性描述</th>
<th>IE 浏览器</th>
<th>Mozilla 浏览器</th>
</tr>
</thead>
<tbody>
<tr>
<td>触发事件的元素</td>
<td>srcElement</td>
<td>target</td>
</tr>
<tr>
<td>事件类型</td>
<td>type</td>
<td>type</td>
</tr>
<tr>
<td>元素的 x 坐标</td>
<td>offsetX</td>
<td>无</td>
</tr>
<tr>
<td>元素的 y 坐标</td>
<td>offsetY</td>
<td>无</td>
</tr>
<tr>
<td>定位元素的 x 坐标</td>
<td>x</td>
<td>layerX</td>
</tr>
<tr>
<td>定位元素的 y 坐标</td>
<td>y</td>
<td>layerY</td>
</tr>
<tr>
<td>窗口的 x 坐标</td>
<td>clientX</td>
<td>clientX</td>
</tr>
<tr>
<td>窗口的 y 坐标</td>
<td>clientY</td>
<td>clientY</td>
</tr>
<tr>
<td>屏幕的 x 坐标</td>
<td>screenX</td>
<td>screenX</td>
</tr>
<tr>
<td>屏幕的 y 坐标</td>
<td>screenY</td>
<td>screenY</td>
</tr>
<tr>
<td>鼠标按键</td>
<td>button</td>
<td>button</td>
</tr>
<tr>
<td>键盘按键</td>
<td>keyCode</td>
<td>keyCode</td>
</tr>
<tr>
<td>按下 shift 键</td>
<td>shiftKey</td>
<td>shiftKey</td>
</tr>
<tr>
<td>按下 alt 键</td>
<td>altKey</td>
<td>altKey</td>
</tr>
<tr>
<td>按下 ctrl 键</td>
<td>ctrlKey</td>
<td>ctrlKey</td>
</tr>
<tr>
<td>上一级元素</td>
<td>fromElement</td>
<td>relatedTarget</td>
</tr>
<tr>
<td>下一级元素</td>
<td>toElement</td>
<td>relatedTarget</td>
</tr>
</tbody>
</table>
</body>
</html>