事件 + 小兼容测试
1.阻止默认事件 return false
2.系统默认右键菜单 oncontextmenu 若想兼容所有浏览器，需要写成document.oncontextmenu=function(){ return false;}
3.原生javascript的鼠标位置是event.clientX与event.clientY.
事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平（垂直）坐标。
客户区指的是当前窗口。
4.jquery中鼠标位置是用event.pageX与event.pageY
clientY 与pageY是有区别的，clientY会忽略滚动条滚动的距离，它指的是鼠标相对于内容区顶部的距离，而pageY会在clientY的基础上加上滚动条滚动的距离，clientX与pageX 也有同样的差异。。
5. 返回键盘被按下的键的字符 event.keyCode全部能支持 (event.which在IE6-8中不支持)
6.相对位置：
javascript 中有offsetLeft与offsetTop,jquery中有offset().left,offset().top，position().left,position().top四个
区别如下：
offsetLeft,offsetTop指的是一个元素相对于包含它的元素的距离
offset()指的是一个元素相对于当前可视窗口的偏移量
position()指的是一个元素相对于父元素的偏移量
因此，offsetLeft,offsetTop与position()应该是一个数据，（明天测试）
测试代码如下：
<!doctype html>
<html>
<head>
<title>clientX与pageX的差异</title>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
.demo{width:500px;height:500px;margin:1500px auto 10px;border:5px solid #139ac7;position:relative;}
.demo_position{width:100px;height:100px;border:2px solid #dedede;background:#dcdcdc;filter:alpha(opacity=50);filter:0.5;position:absolute;top:100px;left:100px;}
ul{width:500px;border:5px solid #ccc;margin:0 auto 20px;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//jquery
$(function() {
$('.demo').click(function(e) {
$('<li>pageX:'+e.pageX+'px,pageY:'+e.pageY+'px</li>').appendTo('ul')
});
$('.demo_position').click(function() {
$('<li>position().left:' + $(this).position().left + ' px;position().top' + $(this).position().top + ' px</li><li>offset().left:' + $(this).offset().left + ' px;offset().top:' + $(this).offset().top + 'px</li>').appendTo('ul')
})
})
//javascript
window.onload = function() {
oDiv = document.getElementById('resArea');
oUl = document.getElementById('showArea');
oPos = document.getElementById('demo_position');
oDiv.onclick = function(ev) {
var oEvent = ev || event;
var ele = document.createElement('li')
ele.innerHTML = 'clintX:' + event.clientX +'px,clientY:' + event.clientY + 'px'
oUl.appendChild(ele)
}
oPos.onclick = function() {
var eles = document.createElement('li');
eles.innerHTML = 'offsetLeft:' + oPos.offsetLeft + 'px,offsetTop:' + oPos.offsetTop + 'px';
oUl.appendChild(eles)
}
}
</script>
</head>
<body>
<div class="demo" id="resArea">
<div class="demo_position" id="demo_position">内容区</div>
</div>
<ul id="showArea">显示区</ul>
</body>
</html>
测试结果如下：
7.宽度与高度
javascript中有offsetWidth/offsetHeight ,指的是一个元素的宽与高，包括边框，内边距，不包含外边距在内
jquery中有width()/height(),innerwidth()/innerHeight(),outerWidth(boolean)/outerHeight(boolean)
width()/height():指的是dom渲染后的width与height值
innerWidth()/innerHeight()指的是dom渲染后的width+左右padding/height+上下padding的值
outerWidth()/outerHeight()指的是dom渲染后的width+左右padding+左右border值/height+上下padding+上下border值
outerWidth(true)/outerHeight(true)指的是在outerWidth()/outerHeight()的基础上加上margin的值
测试案例如下：
<!doctype html>
<title>html5示例</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.demo{width:200px;height:200px;padding:50px;border:10px solid rgba(31,15,00,0.5);margin:100px;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('<p></p>').html('width:'+$('.demo').css('width')+';padding:'+$('.demo').css('padding')+';margin:'+$('.demo').css('margin')).appendTo('body')
$('<p>width:'+$('.demo').width()+';innerWidth:'+$('.demo').innerWidth()+';outerWidth:'+$('.demo').outerWidth()+';outerWidth/true'+$('.demo').outerWidth(true)+';</p>').appendTo('body')
})
</script>
<body>
<script type="text/javascript">
window.onload = function() {
oDiv = document.getElementById('demo')
oP = document.createElement('p')
oP.innerHTML = 'width:'+oDiv.offsetWidth+';height:'+oDiv.offsetHeight;
document.body.appendChild(oP)
}
</script>
<div class="demo" id="demo"></div>
</body>