HTML5中对于网络是否断开的检测.很有意思哦
程序员文章站
2024-03-17 20:34:16
...
1 //事件的封装
2 var EventUtil = {
3 addHandler: function (element, type, handler) {//注册事件
4 if (element.addEventListener) {//非IE
5 element.addEventListener(type, handler, false);
6 }
7 else if (element.attachEvent) {//IE
8 element.attachEvent("on" type, handler);
9 }
10 else {//dom0级
11 element["on" type] = handler;
12 }
13 },
14 removeHandler: function (element, type, handler) {//取消注册事件
15 if (element.removeEventListener) {//非IE
16 element.removeEventListener(type, handler, false);
17 }
18 else if (element.detachEvent) {//IE
19 element.detachEvent("on" type, handler);
20 }
21 else {//dom0级
22 element["on" type] = null;
23 }
24 },
25 getEvent: function (event) {//返回event的引用
26 return event ? event : window.event;
27 },
28 getTarget: function (event) {//返回鼠标单击的目标对象
29 return event.target || event.srcElement;
30 },
31 preventDefault: function (event) {//取消默认事件(a的href,radio,checkbox,)
32 if (event.preventDefault) {
33 event.preventDefault();
34 }
35 else {
36 event.returnValue = false;
37 }
38 },
39 stopPropagation: function (event) {//因为这个EventUtil只支持冒泡,不支持事件捕获,所以这个方法只能阻止冒泡
40 if (event.stopPrapagation) {
41 event.stopPropagation();
42 }
43 else {
44 event.cancelBubble = true;
45 }
46 },
47 getRelatedTarget: function (event) {//获取相关元素
48 /*
49 页面中有一个div;当鼠标离开这个div时,事件的主目标是div,而相关元素是body.
50 mouseover:事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素.
51 mouseout:事件的主目标是失去光标的元素,而相关元素使获得光标的那个元素.
52 */
53 if (event.relatedTarget) { return event.relatedTarget; }
54 else if (event.toElement) { return event.toElement; }
55 else if (event.fromElement) { return event.fromElement; }
56 else { return null; }
57 },
58 getButton: function (event) {//获取鼠标按钮的点击方式
59 if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; }
60 else {
61 switch (event.button) {
62 case 0:
63 case 1:
64 case 3:
65 case 5:
66 case 7:
67 return 0; //左击
68 case 2:
69 case 6:
70 return 2; //中间键
71 case 4:
72 return 1; //右击
73 }
74 }
75 }
76 };
77
78
79 //是否在线的判断:
80 window.onload = function () {
81 function addMessage(str) {
82 var oDiv = document.getElementById("line");
83 var oP = document.createElement("p");
84 oP.innerHTML = str;
85 oDiv.appendChild(oP);
86 }
87 EventUtil.addHandler(window, "online", function () {
88 addMessage("在线");
89 });
90 EventUtil.addHandler(window, "offline", function () {
91 addMessage("不在线");
92 });
93 }1 <body>
2 在线检测;
3 <div id="line"></div>
4 </body>测试环境:
结果:
上一篇： MySQL逻辑架构简介