跨浏览器登录
㈠ js 实现一些跨浏览器的事件方法详解及实例
js实现一些跨浏览器的事件方法
用javaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象:
var
EventUtil
=
{
on:
function(element,
type,
handler)
{/*
添加事件
*/
if
(element.addEventListener)
{
element.addEventListener(type,
handler,
false);
}
else
if
(element.attachEvent)
{//IE
注意:此时事件处理程序会在全局作用域中运行,因此用attachEvent绑定的事件,此时在事件处理函数里的this
等于window,使用时要注意
element.attachEvent("on"
+
type,
handler);
}
else
{
element["on"
+
type]
=
handler;
}
},
off:
function(element,
type,
handler)
{/*
移除事件
*/
if
(element.removeEventListener)
{
element.removeEventListener(type,
handler,
false);
}
else
if
(element.detachEvent)
{
element.detachEvent("on"
+
type,
handler);
}
else
{
element["on"
+
type]
=
null;
}
},
getEvent:
function(event)
{/*
返回对event对象的引用
*/
return
event
?
event
:
window.event;
},
getTarget:
function(event)
{/*
返回事件的目标
*/
return
event.target
||
event.srcElement;
},
preventDefault:
function(event)
{
/*
取消事件的默认行为
*/
if
(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue
=
false;
}
},
stopPropagation:
function(event)
{/*
阻止事件冒泡
*/
if
(event.stopPropagation)
{
event.stopPropagation();
}
else
{
event.cancelBubble
=
true;
}
},
/*
mouseover
和mouserout
这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
getRelatedTarget:
function(event)
{
if
(event.relatedTarget)
{
return
event.relatedTarget;
}
else
if
(event.toElement)
{//IE8
mouserout事件
return
event.toElement;
}
else
if
(event.fromElement)
{//IE8
mouseover事件
return
event.fromElement;
}
else
{
return
null;//其他事件
}
}
};
调用如下:
EventUtil.on(document,
"click",
function(event){//为document元素绑定click事件
event
=
EventUtil.getEvent(event);//获取event事件对象
alert("Screen
coordinates:
"
+
event.screenX
+
","
+
event.screenY);
});
文章参考自《JavaScript高级程序设计第三版》
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
㈡ javascript 什么叫跨浏览器事件处理
一.关于获取事件对象
FF有点倔强,只支持arguments[0],不支持window.event。这次真的不怪IE,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了,只有FF这么多年了还是特立独行。所以,跨浏览器的事件对象获取有以下两种方式:
带参的:
?
1
2
3
4
getEvent : function(event){
return event ? event : window.event;
//return event || window.event;//或者更简单的方式
}
无参的:
?
1
2
3
4
function getEvent() {
return arguments[0] ? arguments[0] : window.event;
//return arguments[0] || window.event;//或者更简单的方式
}
需要特别说明一种方式:html的DOM0级方式 + 带参的事件处理器,如下:
?
1
2
3
4
function handler(event){
//do something
}
<!-- HTML的DOM0级方式 --><br><button id="btn" onclick="handler(event);">按钮</button><br>
上面这种方式是全浏览器兼容的,但依赖HTML的DOM0级方式的缺点很明显,所以没能成为像前两种那样的主流方法,而JS的DOM0级方式 + 带参的事件处理器,如下:
?
1
2
3
4
5
function handler(event){
//do something
}
btn.onclick = handler;//JS的DOM0级方式
//btn.onclick = function(event){/*do something*/}//或者匿名函数,效果同上
这种方式不是全浏览器兼容的,[IE8-]不支持,IE9+未知,FF,Chrome支持。一直以为HTML的DOM0级事件处理和JS的DOM0级事件处理是等价的,现在做了很多实验才发现二者是有区别的
二.关于获取事件源
event.srcElement是[IE8-]唯一的方式,IE9+未知,其它浏览器都支持标准的event.target方式
三.关于阻止事件默认行为
event.preventDefault()是标准方法,但[IE8-]不支持,IE自己的方式是event.returnValue = false;
四.关于停止事件传播
event.stopPropagation()是标准方法,IE又有意见了,他要这么玩:event.cancelBubble = true;这里需要特别注意了,因为cancel是属性而不是方法,与标准相差甚远,容易记错
五.关于事件处理器的添加和移除
DOM0级方式
ele.onclick = handler;ele.onclick=null;最古老的一种方式
优点:全浏览器兼容
缺点:同一事件只能绑定/解绑一个事件处理器
DOM2级方式
?
1
ele.add/removeEventListener(eventType, handler, catch);
和IE方式:ele.attach/detachEvent(‘on'+eventType, handler);
优点:支持绑定/解绑多个事件处理器
缺点:需要做兼容性判断。需要注意的是:标准方式中最后一个参数表示是否在事件捕获阶段绑定/解绑,IE不支持事件捕获,所以也就没有第三个参数了
注意:IE方式不仅方法名与标准不同,参数中事件类型还要加上on,否则绑定无效但不报错
六.跨浏览器的事件处理
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
//跨浏览器的事件处理器添加方式
var EventUtil = {
addHandler : function(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
}
else if(elem.attachEvent){
elem.attachEvent("on" + type, handler);//添加多个同一类型的handler时,IE方式的规则是最后添加的最先触发
}
else{
if(typeof elem["on" + type] === 'function'){
var oldHandler = elem["on" + type];
elem["on" + type] = function(){
oldHandler();
handler();
}
}
else{
elem["on" + type] = handler;//支持添加多个事件处理器
}
}
},
getEvent : function(event){
return event ? event : window.event;
},
getTarget : function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false;
}
},
removeHandler : function(elem, type, handler){
if(elem.removeEventListener){
elem.removeEventListener(type, handler, false);
}
else if(elem.detachEvent){
elem.detachEvent("on" + type, handler);
}
else{
elem["on" + type] = null;//不支持移除单一事件处理器,只能全部移除
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
},
getRelatedTarget : function(event){
if(event.relatedTarget){
return event.relatedTarget;
}
else if(event.toElement && event.type == "mouseout"){
return event.toElement;
}
else if(event.fromElement && event.type == "mouseover"){
return event.fromElement;
}
else{
return null;
}
},
/*IE8点击左键和中键都是0;FF无法识别中键;Chrome正常*/
getButton : function(event){//返回0,1,2 - 左,中,右
if(document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
}
else{
switch(event.button){
case 0:case 1:case 3:case 5:case 7:
return 0;
break;
case 2:case 6:
return 2;
break;
case 4:
return 1;
break;
default:
break;
}
}
},
/*只能检测keypress事件,返回值等于将要显示的字符编码*/
/*IE和Chrome只有能显示的字符键才触发,FF其它键也能触发,返回值为0*/
getCharCode : function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}
else{
return event.keyCode;
}
}
};
综合示例
如果项目中没有使用诸如 jQuery 之类的库,如何方便地为元素绑定事件,并兼容各种浏览器呢?下面这个简单的 Utility 应该可以考虑。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var eventUtility = {
addEvent : function(el, type, fn) {
if(typeof addEventListener !== "undefined") {
el.addEventListener(type, fn, false);
} else if(typeof attachEvent !== "undefined") {
el.attachEvent("on" + type, fn);
} else {
el["on" + type] = fn;
}
},
removeEvent : function(el, type, fn) {
if(typeof removeEventListener !== "undefined") {
el.removeEventListener(type, fn, false);
} else if(typeof detachEvent !== "undefined") {
el.detachEvent("on" + type, fn);
} else {
el["on" + type] = null;
}
},
getTarget : function(event) {
if(typeof event.target !== "undefined") {
return event.target;
} else {
return event.srcElement;
}
},
preventDefault : function(event) {
if(typeof event.preventDefault !== "undefined") {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
使用方法示例:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var eventHandler = function(evt) {
var target = eventUtility.getTarget(evt),
tagName = target.tagName;
if(evt.type === "click") {
if(tagName === "A" || tagName === "BUTTON") {
alert("You clicked on an A element, and the innerHTML is " + target.innerHTML + "!");
eventUtility.preventDefault(evt);
}
} else if(evt.type === "mouseover" && tagName === "A") {
alert("mouseovered " + target.innerHTML);
}
};
eventUtility.addEvent(document, "click", eventHandler);
eventUtility.addEvent(document, "mouseover", eventHandler);
eventUtility.removeEvent(document, "mouseover", eventHandler);
㈢ 有没有浏览器直接可以跨越的那种
目前没有能直接跨越的浏览器,都是借助第三方插件才能实现的。
㈣ 如何解决跨浏览器的问题
你好,你可以使用360浏览器,它界面上的有跨屏浏览的按钮,点就可以跨屏浏览。
㈤ 跨平台、跨浏览器分别是什么意思
跨平台概念是软件开发中一个重要的概念,即不依赖于操作系统,也不依赖硬件环境。通俗的说就是一款软件可以在Windows、Mac OS、Liniux、Android等环境下运行。
跨浏览器指的是某项服务可以应用于多个浏览器。通俗的说就是某个网页能在Chrome、Firefox、Safari、Internet Explorer中正常打开。(某项扩展提供了Chrome、Firefox、Internet Explorer的版本也可以成为跨浏览器)
㈥ 怎么 才能禁止跨浏览器 cookie 共享
IE 8在默认情况下,会话都是一样的。
解决方法有两个:
在IE 8中,假设你没有打开菜单栏,请按下键盘上的Alt键打开菜单栏,然后依次选择“文件-新建会话”,这样IE会自动打开一个新窗口,但该窗口所在会话和原窗口所在会话是完全隔离的,无法共用会话Cookie,因此可以按照需要放心打开多个会话,并使用不同的马甲登录。
如果觉得麻烦,或者有其他原因,也可以创建一个带有特殊参数的快捷方式:“iexplore.exe -nomerge”,使用该参数打开的IE窗口也将使用独立的一套会话Cookie。
实在不行就得要求用户在需要的时候用新建会话的方式实现。
㈦ 在跨浏览器上,B/S结构不尽如人意。什么意思呢
主要是浏览器对html代码的解释效果不一致,在IE6的年代跨浏览器让网页开发人员很头疼
㈧ 熟悉JAVASCRIPT和CSS跨浏览器方面的技巧。 请问 跨浏览器是什么意思
就是说在多种内核和不同版本的浏览器中,你的JAVASCRIPT代码都要能够正确运行,而内CSS则要使页面在各种浏容览器中均能呈现相同的(至少也要差不多的)外观呈现。如果达到了这样的要求,就说明你设计的网页可以跨浏览器运行了。这里说的浏览器包括IE、FireFox、Chrome、Opera等等,而IE又分IE6、IE7、IE8、IE9等,此外还有手机浏览器,很多。
㈨ ntko office怎么跨浏览器
NTKO OFFICE文档控件是由重庆软航科技有限公司开发的,能够在IE、Chrome、Firefox等多个浏览器中编辑S Office、WPS文字、WPS电子表、永中Office、中标普华Office、Open office等文档并保持到WEB服务器的在线编辑控件,该产品完美的实现了文档和电子表格的统一管理。
本文为了广大企业用户能更好的了解该产品,做好信息化管理软件选型,巅峰网评测人员特意体验了该产品,与大家分享其特色功能。
NTKO OFFICE文档控件 六大特色功能
NTKO OFFICE文档控件应用示例如下:
1、二维码功能
二维码功能有公文二维条码、自定义二维码、一维码。通过文档控件提供的函数,调用各种条码的功能,在当前打开的Word,Excel,WPS文字中插入国家公文标准的PDF417条码,自定义内容的PDF417条码,以及QrCode二维条码。并且支持ENA13,CODE39,CODE128等一维条形码。
不仅如此,文档控件还集成了国家公文标准的PDF417二维条码UI界面,通过方法调用,直接启用界面,让用户在界面中输入各项参数,预览并生成pdf417二维码。产生的条码打印之后,可以直接用硬件(条码扫描枪),识别条码的内容。
2、PDF阅读功能:
该功能使得文档控件可以使用OpenFromURL,或者BeginOpenFromURL方法,从本地/服务器打开PDF文档进行阅读。并可以控制禁止保存,打印等。或者可以从本地打开PDF文档并保存到服务器。
3、TIF阅读功能
随着电子传真格式的进一步应用,很多企业接收的传真是TIF格式的文件。此功能使得文档控件可以使用OpenFromURL,或者BeginOpenFromURL方法,从本地/服务器打开TIF文档进行阅读。并可以控制禁止保存,打印等。或者可以从本地打开TIF/TIFF文档并保存到服务器。开发商只需要调用文档控件的接口也就可以实现TIF的功能。
4、永中OFFICE在线编辑功能
文档控件永中OFFICE版增加了文档控件对永中OFFICE基本功能的支持。包括从本地/服务器打开文档,保存文档到本地/服务器,以及基本的痕迹保留等功能支持。
5、CAD在线编辑功能
文档控件CAD版增加了文档控件对CAD基本功能的支持。包括从本地/服务器打开文档,保存文档到本地/服务器。
6、中标普华office /Open office在线编辑功能
文档控件中标普华office版增加了文档控件对中标普华office基本功能的支持。包括从本地/服务器打开文档,保存文档到本地/服务器,以及基本的痕迹保留、智能提交等功能支持,同时支持Open office。
NTKO OFFICE文档控件产品优势简述
1)产品性能稳定,可扩展性强,功能强大;目前国内绝大部分大型开发商都是集成的我们的文档控件,已拥有上万的最终用户群;
2)采用标准的HTTP协议,后台无需安装任何组件,可以支持所有的web服务器及所有的web编程语言;开发简单、兼容性好,对未来只要是采用标准协议的服务器都能支持;
3)采用智能提交技术,可在提交控件数据的同时,提交开发者指定的表单(FORM)数据。避免2次提交,简化开发步骤;
4)在浏览器窗口中直接编辑Word、 Excel、wps、永中Office、中标普华Office、Open office等并保存到Web服务器,实现文档和电子表格的统一管理;
5)支持跨浏览器的在线编辑控件;
6)一个版本同时支持MS office和金山WPS在线编辑,并支持多种文档在线阅读: PDF文档阅读、TIF文档阅读等;
7)支持自定义菜单、自定义按钮、自定义工具栏,进一步增强了系统的可集成性;
8)Visio文档、PDF及TIF阅读;
9)BS版本的控件,一个版本支持不同的开发语言。只要购买一个版本,就可以用于多种WEB开发平台(通用WEB版本也可以支持PB、VC开发,针对要求相对较高的客户,建议采用PB、VC单独版本)。
10)同一版本同时支持OFFICE03、07、10等的在线编辑;
11)产品授权与服务器的数量无关
12)无缝集成NTKO 电子印章系统,支持电子印章、手写签名、键盘批注等,以及实现在各种文档中加盖安全签章的解决方案;
13)拥有终身免费的、完善的售前和售后远程技术支持服务,为客户解决集成时的后顾之忧。
㈩ Struts2怎样防止多个用户跨浏览器登录
每当一个用户尝试登陆时,首先验证一下用户名,密码,然后对一个表字段查询验证,此字段用于判断用户是否已经登陆!可以设置为数字类型!用于控制同时在线个数!