JavaScript - 思想之地

JavaScript在不同浏览器下取得鼠标绝对位置函数

post by 朦朧中的罪惡 / 2010-3-3 14:32 Wednesday Javascript

首先不同浏览器中event位置属性的分析:

1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)
2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)
3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)
4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数)

然后是DOM对象高度属性分析

1. scrollHeight: 获取对象的滚动高度
2. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
3. scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
4. scrollWidth:获取对象的滚动宽度
5. offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
6. offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
7. offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

有了以上分析，写出两个取位置的函数

// 取X轴位置
function mouseX(evt) {
    // firefox
    if (evt.pageX) return evt.pageX;
    // IE
    else if (evt.clientX)
        return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return null;
}
// 取Y轴位置
function mouseY(evt) {
    // firefox
    if (evt.pageY) return evt.pageY;
    // IE
    else if (evt.clientY)
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return null;
}

标签: JavaScript

评论(1) 引用(0) 浏览(35)

利用javascript闭包特性给setInterval(setTimeout)传递参数

post by 朦朧中的罪惡 / 2009-10-22 12:26 Thursday Web前端

function doSomething(paramA, paramB, paramC) {
/*

返回一个由函数表达式创建的匿名内部函数的引用 - 闭包

   */
    return (function() {
        /*

这个内部函数将通过 - setInterval- 执行，

而且当它执行时它会读取并按照传递给外部函数的参数行事：

       */
        paramA[paramB] = paramC;
    });
}

/*

调用这个函数将返回一个在其执行环境中创建的内部函数对象的引用。

传递的参数最终将作为外部函数的参数被内部函数使用。

返回的对内部函数的引用被赋给一个全局变量

*/
var functRef = doSomething(menu, "display", "none");
/**//* 调用 setInterval函数，将赋给变量 - functRef - 的内部函数的引用作为传递的第一个参数:- */
setInterval(functRef, 500);

标签: JavaScript

评论(0) 引用(0) 浏览(432)

jquery修复ie6不支持position: fixed;的插件

post by 朦朧中的罪惡 / 2009-9-25 15:41 Friday Web前端

	<!--[if lte IE 7]>

	<script type="text/javascript">

	(function($) { 

	    $.fn.pozFixed = function(params) { 

	        var defaults = { 

	            top : 400, 

	            left : '50%',

	            interval:100

	        }; 

	        defaults = $.extend(defaults,params);     

	        return this.each(function(i,o) { 

	            var $this = $(this); 

	            this.fixPosition = function() { 

	            var st = $().scrollTop();  

	                $this.css({

	                    top:st + defaults.top,

	                    left:'50%'

	                });               

	            };

	            $this.css({position:'absolute',top:defaults.top,left:"50%"}); 

	            setInterval(this.fixPosition,defaults.interval); 

	        });

	    };

	})(jQuery);

	</script>

	<![endif]-->

标签: JavaScript 原创

评论(0) 引用(0) 浏览(539)

FireFox和IE下使用ajax的一些小问题总结

post by 朦朧中的罪惡 / 2009-6-17 20:07 Wednesday Web前端

1、FireFox下使用xmlHttpRequest的send方法是必须指定参数。即.send();是无效的，如果没有参数要使用.send(null);.
2、FireFox下处理DOM时把空白也当作是一个节点。因此为了避免出现一些意想不到的问题，要尽量不要使用空白（包括换行、空格等等）。
3、使用createElement创建节点时，IE下可以用document.createElement(”<tr>”);但是FireFox下只能用document.createElement(”tr”);
4、添加子节点，IE可以用add，但是FireFox下不可以。FireFox下只能用appendChild.
5、如果IE下往table节点里添加tr达不到预期效果，常常是因为没有添加tbody节点。
6、IE下使用javascript设定td的colspan无效是因为大小写的问题，必须使用colSpan。
7、FireFox下输出从服务器端返回XML时注意开头不能有空白（包括换行、空格等），否则会有解析错误。
8、使用xmlHTTPRequest实现分页效果时，每次处理完一次请求要把xmlHTTPRequest对象消掉，下次使用时再重新构建。

标签: JavaScript FireFox

评论(0) 引用(0) 浏览(847)

ie6下不运行gzip压缩后javascript代码的Bug

post by 朦朧中的罪惡 / 2008-12-10 22:35 Wednesday 疑难杂症

这是我在项目中遇到的问题:

为了提高客户端javascript文件的加载速度,我将所有的javascript代码通过php进行gzip压缩后再发给浏览器,原来200多kb的脚本文件压缩后之只有30多kb,浏览加载速度非常快用户体验很好，但是奇怪的问题出现了，在ie7,firefox下运行的非常良好的脚本到了ie6下就没了反应,每次都要刷新网页后才脚本才能运行.

跑到微软那一查,给的答复让我吐血:

Do not enable HTTP compression for the script files

请不要对脚本文件开启http压缩

只好在服务器端增加对浏览器的识别代码,如果是ie6,就不压缩脚本文件了

虽然脚本能运行了,可是用户体验就...

哎,我恨ie 6

标签: JavaScript 网页开发原创

评论(4) 引用(0) 浏览(2015)

IE的document.getElementById混淆name和id属性的BUG

post by 朦朧中的罪惡 / 2008-10-15 22:54 Wednesday Web前端

前不久我在开发中遇到了在IE下Form.submit()的一个BUG,没想到IE的BUG还不只这么一个,下面我来介绍我遇到的另外一个关于document.getElementById的BUG.

BUG演示

页面演示在这里,代码在下面

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE document.getElementById BUG DEMO</title>
</head>
<body>
<script language="javascript">
/*
IE document.getElementById BUG 演示DEMO
作者:朦朧中的罪惡
博客:http://be-evil.org
*/
function changeValue()
{
var username = document.getElementById('username');
username.value = 'Whahaha';
}
</script>
<form action="IE_BUG2.html" method="get">
<p>name:<input type="text" name="username" /></p>
<p>name2:<input type="text" id="username" name="name" /></p>
<p><input type="button" value="改变" onclick="changeValue();" /></p>
</form>
</body>
</html>

很简单的一段代码,看上去似乎没有任何错误,但是在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象.

阅读全文>>

标签: JavaScript 原创

评论(0) 引用(0) 浏览(3108)

IE中使用JavaScript中调用form.submit()提示“对象不支持此属性和方法”问题研究

post by 朦朧中的罪惡 / 2008-8-20 17:32 Wednesday 疑难杂症

今天在项目中无意中遇到的一个神奇的问题，特此记录。

首先我们看看以下代码，测试页面可以看这里,页面的功能和逻辑很简单。

这段代码从逻辑上看没有任何错误和BUG，理论上是可以完全执行的。

<html>
    <head>IE 测试</head>
<body>
<script language="javascript">
/*
======================================
    IE 下 submit 重名测试
    作者：朦朧中的罪惡
    博客：http://be-evil.org
======================================
*/
function dosubmit()
{
    var theform = document.getElementById('theform');
    theform.submit();
}
</script>
    <form method="post" id="theform">
        <table width="800">
            <tr>
                <td><input type="text" value="测试"></td>
            </tr>
            <tr>
                <td><input type="button" name="submit" value="提交" onclick="dosubmit()"></td>
            </tr>
        </table>
    </form>
</body>
</html>