demo.html
<html> <head> <title>event.type</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ $("a").click(function(event) { alert(event.type); //获取事件类型 return false; //阻止链接跳转 }); }) </script> </head> <body> <a href='http://google.com'>click me .</a> </body> </html>
效果图:
demo2.html
<html> <head> <title>event.target</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ $("a").click(function(event) { alert(event.target.href); //获取触发事件的<a>元素的href属性值 return false; //阻止链接跳转 }); }) </script> </head> <body> <a href='http://google.com'>click me .</a> </body> </html>
效果图:
demo3.html
<html> <head> <title>event.pageX event.pageY</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ $("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标 return false;//阻止链接跳转 }); }) </script> </head> <body> <a href='http://google.com'>click me .</a> </body> </html>
效果图:
demo4.html
<html> <head> <title>event.which</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ $("a").mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) </script> </head> <body> <a href='http://google.com'>click me .</a> </body> </html>
效果图:
demo5.html
<html> <head> <title>event.which2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ $("input").keyup(function(e){ alert(e.which); }) }) </script> </head> <body> <input /> </body> </html>
效果图:
demo6.html
<!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>event.metaKey</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script> $(function(){ $("input").keyup(function(e){ alert(e.metaKey +" "+e.ctrlKey ); $(this).blur(); }) }) </script> </head> <body> <input type="text" value="按住ctrl键,然后再点其他任何键" style="width:200px"/> </body> </html>
效果图: