fuanyu
- 浏览: 503998 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (285)
- 数据库 (49)
- dwr (1)
- js (35)
- security (6)
- freemaker (4)
- 网站建设 (15)
- css (5)
- javaEE (56)
- 生活点滴 (12)
- 安装与配置 (16)
- ssh2 (13)
- 开源软件 (6)
- web 应用服务器 (6)
- 开发模式和设计模式 (2)
- linux (5)
- 项目管理 (7)
- 计算机杂症 (0)
- appScan (1)
- idea (3)
- android (1)
- java @override 报错处理 (1)
- lucene (5)
- java (2)
- groovy (1)
- Extjs (7)
- asp (2)
- php (2)
- Memcached (1)
- 名言 (1)
- 面试 (1)
- Jmeter (0)
- 微信支付 (1)
- app开发 (1)
- branch分支合并到trunk主干 (1)
- 自动化测试 (1)
- springClond (1)
- ELK (2)
最新评论
-
skykufo：
坑爹啊，我也因为写多了一个div，在ie8浪费了一天
jQuery加载（load、get、post）页面显示空白原因 -
yeyinzhu3211：
帅哥,我想问下,是怎么去除呀?能详细说明下吗?
IntelliJ IDEA 10.5.1 无法断点或停止不动 -
sshitaime：
怎么下载不了啊，能给我一个安装包吗
oracle 10g透明网关组件下载地址(新) -
fuanyu：
xiaohuafyle 写道被你的头像吓尿了 哥们有这么可怕呀 ...
netstat -aon -
wanlt_software：
谢谢。。。。。
oracle 10g透明网关组件下载地址(新)
<head>
<script type='text/javascript'>
function init() {
// 跳转处理
var handler = function(){
var host = document.location.href;
if(host.indexOf('jx163.cn') >= 0)
document.location = "/";
else ;
};
// 添加监听
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', handler, false);
window.addEventListener('load', handler, false);
} else if (window.attachEvent)
window.attachEvent('onload', handler);
else
window.onload = handler;
} // end init
init();
</script>
</head>
<body>
－－－－－－－－－－－－－－－－－－－－
window和firefox下的event
－－－－－－－－－－－－－－－－－－－－
<SCRIPT LANGUAGE="JavaScript">
<!--
function hh(e)
{
alert(arguments[0]);
e=window.event||e;
var el=e.srcElement||e.target;
alert(el.value);
}
//-->
</SCRIPT>
<INPUT id ="button2" value ="hahahahah" TYPE="button" onclick="hh(event);">
－－－－－－－－－－－－－－－－－－－－
test
－－－－－－－－－－－－－－－－－－－－
if(WebComm.getOS() == "MSIE")
{
obj.setCapture ();
}
else
{
document.addEventListener("mousemove",WebComm.MoveDiv,false);
}
if(WebComm.getOS() == "MSIE")
{
obj.releaseCapture ();
}
else
{
document.removeEventListener("mousemove",WebComm.MoveDiv,false);
}
－－－－－－－－－－－－－－－－－－
1.火狐不能对innerText支持，也不知道为什么。火狐支持innerHTML但却不支持innerText，所以上网查了一 下，原来它改支持textContent来实现innerText，不过实现得没有那么好，默认把多余的空格也保留了。如果不用textContent， 如果字符串里面不包含HTML代码也可以用innerHTML代替
2.禁止选取网页内容：
在IE中一般用js：obj.onselectstart=function(){return false;}
而火狐用CSS:-moz-user-select:none
3.滤镜的支持(例：透明滤镜)：
IE:filter：alpha(opacity=10);
火狐：-moz-opacity:.10;
4.捕获事件：
IE：obj.setCapture() 、obj.releaseCapture()
火狐： document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);
5.获取鼠标位置：
IE:event.clientX、event.clientY
火狐：需要事件函数传递事件对象
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}
6.DIV等元素的边界问题：
比如：设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而火狐：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
所以在做这个兼容IE和火狐的拖动窗口时，在js和css的写法上要动点脑筋，给大家两个小技巧.
一.判断浏览器类型：
var isIE=document.all? true:false;
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false
二.在不同浏览器下的CSS处理：
一般可以用!important来优先使用css语句（仅火狐支持）
比如：{border-width:0px!important;border-width:1px;}
在火狐下这个元素是没有边框的，在IE下边框宽度是1px
又发现几处XHTML与正常状态下的JS、CSS的区别,前阶段写了兼容IE/火狐的拖动窗口发现了这两个浏览器的几处区别。今天又写了兼容XHTML的版本，因为现在不是流行web标准嘛，偶不能落后啊！再说现在ASP.NET中的所有页面都是应用XHTML标准的，如果在布局页面中删了这句标准代码，里面的布局和控件visual studio就不显示了。
呵呵，在网页开头加了这个代码就是所谓的XHTML标准了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改了一下JS和CSS，调试了N次，发现了XHTML标准下的几个不同点：
1.document.documentElement 与 document.body
代码中设置页面的CSS时一定要用：document.documentElement
比如：document.documentElement.style.overflow='hidden';
overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的；
2.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement
即这四个属性（clientWidth、clientHeight、scrollLeft、scrollTop）一定要用document.documentElement
但是document.body.appendChild()和document.body.removeChild()却是可以用的，而且用 document.documentElement.appendChild()和 document.documentElement.removeChild()代替却会报错；
所以我总结了一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement
3.呵呵，加了这个标准以后IE的边框问题也出现了变化，现在和火狐趋于一致了，是不是这个就是XHTML的优点——跨浏览器的标准
上篇文章提到：
设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中（正常情况）：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
火狐（正常情况）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
加了XHTML标准后的（IE和火狐打和了，^_^）：
IE中（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
火狐（XHTML）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
－－－－－－－－－－－－－－－－－－－－
对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
下面是详解
其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发") }
如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。
<script type='text/javascript'>
function init() {
// 跳转处理
var handler = function(){
var host = document.location.href;
if(host.indexOf('jx163.cn') >= 0)
document.location = "/";
else ;
};
// 添加监听
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', handler, false);
window.addEventListener('load', handler, false);
} else if (window.attachEvent)
window.attachEvent('onload', handler);
else
window.onload = handler;
} // end init
init();
</script>
</head>
<body>
－－－－－－－－－－－－－－－－－－－－
window和firefox下的event
－－－－－－－－－－－－－－－－－－－－
<SCRIPT LANGUAGE="JavaScript">
<!--
function hh(e)
{
alert(arguments[0]);
e=window.event||e;
var el=e.srcElement||e.target;
alert(el.value);
}
//-->
</SCRIPT>
<INPUT id ="button2" value ="hahahahah" TYPE="button" onclick="hh(event);">
－－－－－－－－－－－－－－－－－－－－
test
－－－－－－－－－－－－－－－－－－－－
if(WebComm.getOS() == "MSIE")
{
obj.setCapture ();
}
else
{
document.addEventListener("mousemove",WebComm.MoveDiv,false);
}
if(WebComm.getOS() == "MSIE")
{
obj.releaseCapture ();
}
else
{
document.removeEventListener("mousemove",WebComm.MoveDiv,false);
}
－－－－－－－－－－－－－－－－－－
1.火狐不能对innerText支持，也不知道为什么。火狐支持innerHTML但却不支持innerText，所以上网查了一 下，原来它改支持textContent来实现innerText，不过实现得没有那么好，默认把多余的空格也保留了。如果不用textContent， 如果字符串里面不包含HTML代码也可以用innerHTML代替
2.禁止选取网页内容：
在IE中一般用js：obj.onselectstart=function(){return false;}
而火狐用CSS:-moz-user-select:none
3.滤镜的支持(例：透明滤镜)：
IE:filter：alpha(opacity=10);
火狐：-moz-opacity:.10;
4.捕获事件：
IE：obj.setCapture() 、obj.releaseCapture()
火狐： document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);
5.获取鼠标位置：
IE:event.clientX、event.clientY
火狐：需要事件函数传递事件对象
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}
6.DIV等元素的边界问题：
比如：设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而火狐：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
所以在做这个兼容IE和火狐的拖动窗口时，在js和css的写法上要动点脑筋，给大家两个小技巧.
一.判断浏览器类型：
var isIE=document.all? true:false;
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false
二.在不同浏览器下的CSS处理：
一般可以用!important来优先使用css语句（仅火狐支持）
比如：{border-width:0px!important;border-width:1px;}
在火狐下这个元素是没有边框的，在IE下边框宽度是1px
又发现几处XHTML与正常状态下的JS、CSS的区别,前阶段写了兼容IE/火狐的拖动窗口发现了这两个浏览器的几处区别。今天又写了兼容XHTML的版本，因为现在不是流行web标准嘛，偶不能落后啊！再说现在ASP.NET中的所有页面都是应用XHTML标准的，如果在布局页面中删了这句标准代码，里面的布局和控件visual studio就不显示了。
呵呵，在网页开头加了这个代码就是所谓的XHTML标准了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改了一下JS和CSS，调试了N次，发现了XHTML标准下的几个不同点：
1.document.documentElement 与 document.body
代码中设置页面的CSS时一定要用：document.documentElement
比如：document.documentElement.style.overflow='hidden';
overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的；
2.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement
即这四个属性（clientWidth、clientHeight、scrollLeft、scrollTop）一定要用document.documentElement
但是document.body.appendChild()和document.body.removeChild()却是可以用的，而且用 document.documentElement.appendChild()和 document.documentElement.removeChild()代替却会报错；
所以我总结了一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement
3.呵呵，加了这个标准以后IE的边框问题也出现了变化，现在和火狐趋于一致了，是不是这个就是XHTML的优点——跨浏览器的标准
上篇文章提到：
设置一个div的CSS:：{width:100px;height:100px;border:#000000 1px solid;}
IE中（正常情况）：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
火狐（正常情况）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
加了XHTML标准后的（IE和火狐打和了，^_^）：
IE中（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
火狐（XHTML）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
－－－－－－－－－－－－－－－－－－－－
对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
下面是详解
其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。
html代码
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发") }
如果userCapture是true则test1先触发，如果userCapture是false则test2先触发。
分享到：
发表评论
-
bootstrap学习
2020-11-29 23:23 248https://v3.bootcss.com/compone ... -
js浮点数精确计算函数(加，减，乘，除)
2014-03-25 13:54 787come from http://www.cnblogs. ... -
js 删除类的属性
2014-02-07 16:35 1052allUpdateSave: function(pan ... -
js数组
2013-07-31 15:31 854来自于:http://www.cnblogs. ... -
jQuery对select操作小结
2013-07-03 18:08 846//遍历option和添加、移除optionfunctio ... -
JavaScript面向对象编程
2013-01-06 16:48 829//类的定义 //方法一：类的一般定义方法 f ... -
js 页内搜索(主要文章内容)
2012-12-21 16:14 1111<html> <head> < ... -
form serialize() for jquery or Ext
2012-11-16 21:35 2290jQuery ajax - serialize() ... -
万恶的ie6
2012-02-20 10:05 0万恶的ie6,因select新增option的原因..用js怎 ... -
uncaught exception: [CKEDITOR.editor] The instance “xxxx” already exists
2011-10-28 11:55 2301主要防止加载同一个id,如下代码 <span> ... -
JS读取当前URL的一些属性(转)
2011-10-26 12:31 1604from http://weivs929.iteye.com ... -
IE和firefox通用的复制到剪贴板的JS函数
2011-10-26 12:28 988function copyToClipboard(txt) { ... -
jQuery加载（load、get、post）页面显示空白原因
2011-10-08 11:13 6214郁闷国庆几天了，终于查出为何load一个目标页面(html,j ... -
js实现增删table行
2011-06-08 17:32 1090//清空原有表格数据 02 ... -
jquery 在IE6中设置select控件的selected属性的时候
2011-02-22 10:50 2726在IE6中使用jquery给select 赋值选中某值时会出 ... -
笛卡尔情书的秘密——心形函数的绘制
2011-02-18 11:53 5459本文来自:http://www.iteye.c ... -
js radio checked 取值的问题
2011-02-13 15:46 4210如看原码 <tr> < ... -
js tab效果
2011-01-13 18:36 2946<head> <title>无标题文 ... -
js 某一天为星期几的代码
2011-01-06 16:55 1913<html xmlns="http://www ... -
JS判断某年某月有多少天
2011-01-06 16:53 1747以前写网页的时候，经常碰到选择日期的问题，其实就是判断某年某月 ...
相关推荐
1. **事件处理**：IE使用attachEvent方法添加事件监听器，而Firefox则使用addEventListener。为确保兼容，可以创建一个跨浏览器的事件处理函数，如： ```javascript function addEvent(element, event, handler) { ...
在处理事件监听器时，IE使用attachEvent，Firefox使用addEventListener。 再者，CSS样式和JavaScript的交互在IE和Firefox上也有区别。IE有时会忽视标准的style属性，而是使用专有的currentStyle属性来获取元素的...
需要注意的是，attachEvent 方法不支持 Mozilla 系列的浏览器（如 Firefox），并且在使用时可能会有执行顺序的问题。按照从后到前的顺序执行，意味着最后一个绑定的函数会最先执行。 示例代码如下： ```javascript ...
在“javascript日历控件 兼容ie firefox opera”这个主题中，我们主要探讨的是一个能够同时在Internet Explorer（IE）、Firefox和Opera等主流浏览器上正常运行的JavaScript日历组件。 1. **日历控件的基本功能**： ...
在IE中，我们可以通过`onmousedown`、`onmousemove`和`onmouseup`事件来实现拖动，而在Firefox中，我们可以使用`addEventListener`添加这些事件的监听器。但这样的做法会导致代码的不兼容性，因为IE不支持`...
这个实例代码是为了实现跨浏览器的事件监听功能，确保在 Internet Explorer (IE) 和 Firefox 等其他浏览器中都能正常工作。在JavaScript中，事件监听主要通过 `addEventListener` 和 `attachEvent` 方法来实现。 在...
- IE使用`attachEvent`来添加事件监听器，而Firefox等其他浏览器使用`addEventListener`。在编写跨浏览器代码时，需要同时处理这两种情况。 - 对于事件冒泡和事件捕获，IE默认支持冒泡，而Firefox则默认支持捕获。...
JavaScript Option onclick 事件 IE 解决方案及兼容 IE 和 Firefox JavaScript 中的 Option onclick 事件是用户在Select 元素中选择一个选项时触发的事件，但是在 Internet Explorer（IE）浏览器中，该事件无法正确...
JavaScript 和 CSS 在不同的浏览器之间可能存在兼容性问题，尤其是在 Internet Explorer (IE) 和 Mozilla Firefox 这两个浏览器中。本文将详细探讨这些差异，并提供相应的解决策略，以确保网站在各种浏览器中都能...
JavaScript 和 CSS 在不同的浏览器上，特别是 Internet Explorer (IE) 和 Mozilla Firefox 之间存在一些差异，这些差异主要体现在解析规则、实现细节以及某些功能的支持上。理解这些差异对于编写跨浏览器兼容的代码...
- **事件处理**：IE使用`attachEvent`绑定事件监听器，而Firefox和其他现代浏览器则使用`addEventListener`。 - **DOM操作**：IE对于某些DOM属性和方法的支持较差，如`getElementsByClassName`在旧版IE中不可用，...
在不同的浏览器中，尤其是IE和火狐（Firefox），这些事件可能存在兼容性问题。本文将深入探讨如何在JavaScript中处理按键事件，并解决在IE和火狐浏览器上的兼容性问题。 首先，我们来了解JavaScript中的几个主要...
- **事件处理**：IE使用`attachEvent`来添加事件监听器，而Firefox使用`addEventListener`。移除事件监听器时，IE使用`detachEvent`，Firefox使用`removeEventListener`。 - **跨域请求**：IE7及更低版本有...
- Firefox 支持 W3C 规范的 `addEventListener`，而 IE 更早版本使用的是 `attachEvent`。 - 为了确保兼容性，你需要根据浏览器类型分别使用这两种方法来添加事件监听器。 7. **其他差异** - 一些 JavaScript 的...
综上所述，Firefox与IE在JavaScript的兼容性方面存在着诸多差异，这些差异主要体现在事件处理、DOM操作、CSS样式以及网络请求等方面。为了确保Web应用在不同浏览器上的正常运行，开发者需要充分了解这些差异，并采取...
### 兼容IE与Firefox：JS代码详解 在Web开发过程中，确保JavaScript代码能够在不同的浏览器上正常运行是一项挑战性任务。特别是在早期版本的Internet Explorer（IE）与Firefox之间实现兼容性，更是如此。本文将详细...
在JavaScript中，我们可以使用`addEventListener`或`attachEvent`（对于旧版IE浏览器）来添加事件监听器。例如，我们可以监听到一个特定的API调用或者某个特定的网络活动来判断用户是否上线。 接着，我们讨论DOM...
1. **事件处理**：IE使用`attachEvent`方法添加事件监听器，而Firefox使用`addEventListener`。为了兼容，可以编写一个函数来统一处理事件绑定。 2. **CSS前缀**：不同浏览器对CSS3属性的支持可能存在差异，如`...
在IE浏览器中，`attachEvent`用于添加事件监听器，而`addEventListener`是W3C标准的事件处理方式，被Firefox等现代浏览器所支持。两者的主要差异在于`this`的指向： - 在IE的`attachEvent`中，`this`指向全局对象`...