BlogJava-自知其无知-文章分类-JavaScript

获取当前节点 - 通过事件来获取。

CopyHoo — Thu, 18 Dec 2008 01:30:00 GMT

FROM： http://topic.csdn.net/u/20081015/00/a4588ce0-5c8d-4684-b8fb-a41a3975dc8b.html

我的任务是这样的

<table>
<tr>
<td>要获取的内容td>
<td><a href=javascript:getcontent()>点击获取a>td>
tr>
table>

<script language="javascript">
var curNode = document.elementFromPoint(event.x,event.y);
alert ( curNode.parentElement.parentElement.firstChild.innerText);
script>

这个程序很简单的了。就是点击的时候获取上一个目录里面的内容。

当我点击的时候，却提示我 “Error:缺少对象”。请高手解释一下，如何获得当前位置，希望能在ie和firefox中都通过。

我知道迅雷右键菜单中用到了

var srcEvent = external.menuArguments.event;
var EventElement;

if(typeof(srcEvent.clientX) == "undefined")
{
EventElement = external.menuArguments.document.elementFromPoint ( srcEvent.pointerX, srcEvent.pointerY );
}
else
{
EventElement = external.menuArguments.document.elementFromPoint ( srcEvent.clientX, srcEvent.clientY );
}

来获取右键菜单的位置，但是我不知道如何左键该如何做，谢谢大家。

答案：
var curNode = document.activeElement

真正准确的答案：
以下可以获取：

<table>
    <tr>
        <td>要获取的内容td>
        <td><a onclick=javascript:getcontent()>点击获取a>td>
    tr>
table>

<script language="javascript">
function getcontent(){
var curNode = document.elementFromPoint(event.x,event.y);
alert ( curNode.parentElement.parentElement.firstChild.innerText);
}
script>

以下不能获取：

<table>
    <tr>
        <td>要获取的内容td>
        <td><a href=javascript:getcontent()>点击获取a>td>
    tr>
table>

<script language="javascript">
function getcontent(){
var curNode = document.elementFromPoint(event.x,event.y);
alert ( curNode.parentElement.parentElement.firstChild.innerText);
}
script>

两者的区别在于，第一个用的是 onclick ，第二个用的是 href .

楼上的老大告诉一下为什么啊

都是调用 JS 函数，区别咋这么大呢？

我自己测试了一下。
也就是楼主的疑问，说为什么用 href 就不能获得正确的结果，而 onclick 确实可以的？
呵呵。。我就对事件源进行 alert(e); 果然不出所料， href 的时候， alert(e) ; //output "null"
也就是说 href 并没有产生是事件，而你用 onclick 就是产生了 click 事件。！

CopyHoo 2008-12-18 09:30 发表评论

1、在Baidu空间中的发现

CopyHoo — Sun, 14 Dec 2008 13:30:00 GMT

转自: http://www.itokit.com/web/13/2008/11/11634.html

超链接的href 和onclick引发的思考.
1、在Baidu空间中的发现
空间是一个功能简洁的Blog，但是它提供操作是比较方便的，一些常用的功能都使用模拟窗口作为界面，而不是要页面跳转或者新开窗口。& f* P- W- {0 r) f# s
我从HTML代码里面找到了创建分类的链接代码：
E% F
增加新分类:
这是一种非常健壮的代码结构，onclick里面的javascript代码执行后返回了false，相当于链接功能被屏蔽。但是，当 javascript被禁用或者onclick里面的代码执行出错时，链接功能还是正常的。当网速很慢导致openaddcat函数的代码还未被读取时，单击链接就会弹出了一个新页面。因此，用户点击这个链接之后就不会出现什么都没发生的情况，提高了用户体验
2、用同样的思路进行SEO优化
某些网站的列表页使用了AJAX进行分页，即换页的时候只刷新列表的部分，而不是整页刷新。代码可能是
第二页

这种方式向来有一种缺点：SEO非常糟糕。搜索引擎基本上是不认识Javascript代码的，所以它搜不到除了第一页之后的内容。按照上面的思路，我们需要给href加上一个有意义的链接，让搜索引擎可以搜到该页。改进如下：第二页'
当然，这样写的前提是做两份页面，一份是AJAX分页时的处理请求的页面，另一份是常规分页页面。

3、改进
上面的链接代码不符合HTML与Javascript分离的原则，而且在openaddcat未被读取时按下链接的时候会导致浏览器报错（虽然功能正常），改进的方法是后期动态添加事件。HTML修改如下：
增加新分类
在页面底部写上添加事件的脚本：[code]var newCate = document.getElementById(”newCate”);
var createCategory = function(e) {
openaddcat(’/heero0w/creat/category/');
e = e || event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
return false;
};
if (newCate.addEventListener) {
newCate.addEventListener(”click”, createCategory, false);
} else if (newCate.attachEvent) {
newCate.attachEvent(”onclick”, createCategory);!
}[/code]

CopyHoo 2008-12-14 21:30 发表评论

如何让 href 失效。

CopyHoo — Sun, 14 Dec 2008 11:04:00 GMT

合理使用 return false;
注意其中的原理:

<a href="http://www.google.cn" onclick="return myclick();">链接到谷歌a>

<script type="text/javascript">
   function myclick(){
      alert('呵呵，我失效了吗？');
      return false;
   }
script>

当然，还可以利用链接到一个函数的方式，如下:

<a href="javascript:goto();">链接失效咯。a>

================================

连接

当点击button后，如何使上面超链接无效？？

连接


连接

连接


这一个比较经典，我，曾经见过！！！
连接

连接

连接

============================================
这是一个很经典的通过 css 来控制的：

建站学|www.jzxue.com|---让网页上的超链接失效，不能点击

建站学

www.163.com

www.sohu.com

===================================
在开发中时常会遇到这样的需求:让某些描述信息(这些描述信息已经进行过安全html过滤,所以不会包含Javascript等脚本语言,但是允许正常的链接)里的链接失效,但是不要或者这些描述信息.如要以下代码块里的链接失效



　 无聊网

　　只需要再后面插入下段Javascript既可

　　目前只知道a和area标签可以放href属性来进行跳转,不知道大家还知道有其它的方式可以用href跳转吗?

==========================================

捕获超链接的Ctrl+Click事件(handling onclick event on a hyperlink when Ctrl key is pressed)

（奇怪，不知道客户要这个效果做什么）

效果：

如果点击超链接，将正常导向；

如果按住Ctrl键并点击超链接，将执行一段JS代码，并且浏览器不会导向或打开新页面

<a href="#" onclick="if(event.ctrlKey){alert('Hello World!');return false;}window.location.href='http://www.google.com'";>googlea>

作者：Lance Zhang（Lance Zhang's Tech Blog）
出处：http://blodfox777.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

以前点某个链接希望停留在本页面的时候，往往会用href=“#”来做、今天学会了用onclick="return false;"。
因为解释器是根据link的onclick方法的返回值来判断是否继续操作的。

这样就可以进一步提高javascript的兼容性，比如写一个弹出窗口就可以这样：
JavaEye
这样支持javascript的用户可以看到弹出窗口，不支持的可以直接链接到页面。

在实际的测试中，firefox2可以实现，ie6不行。

=============================================
一个冠冕堂皇的理由来解释为什么 onclick 返回 false 之后就可以进行使链接失效:
onclick="return fn()" 与onclick"fn()"有什么区别?好像两个都可以调用吧?
返回到哪里了关键????
这就像一个回调函数吧.?
返回给onclick?????
回调,越来越晕了,呵呵

这就像一个回调函数吧.?
onclick 方法的之行需要事件告诉他执行还是不执行

因为JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。

而该值决定了当前操作是否继续。
当返回的是TRUE时，将继续操作。
当返回是false时，将中断操作。

而直接执行时。将不会对window.event.returnvalue进行设置
所以会默认地继续执行操作

当在 open 中
如果函数 add_onclick() 返回 true, 那么页面就会打开 abc.htm
否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外)

而 open
不管 add_onclick() 返回什么值, 都会在执行完 add_onclick 后打开页面 abc.htm

不过注意：这个使链接失效的代码是不是版本兼容的，也不是浏览器兼容的。
IE6 可以 ,IE7 不行。。。
FireFox 据说也不行。

CopyHoo 2008-12-14 19:04 发表评论

JS类检测上传图片的大小,宽,高及格式检查 - 封装控件的思想

CopyHoo — Thu, 11 Dec 2008 16:08:00 GMT

无标题文档

下载源程序:

CopyHoo 2008-12-12 00:08 发表评论

js 判断上传文件类型

CopyHoo — Thu, 11 Dec 2008 15:59:00 GMT

CopyHoo 2008-12-11 23:59 发表评论

javascript 弱弱的限制上传文件大小（一定要服务器再判断一遍。）

CopyHoo — Thu, 11 Dec 2008 15:51:00 GMT

准备一个在客户端判断上传文件大小，限制大小的好方法，但是实在没有找到，
因为即使你用 Ajax ,可能结果还没有返回，表单就已经被提交了。。。
所以服务器必须重新判断。。。。

以下为弱弱的判断。。

应用了javascript和在IE下img本身的fileSize属性。另外img还有其他的几个属性，如fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters，我们可以通过这些属性来获取图片文件的部分信息，如文件大小，我们用file表单同img标签结合，就能够在上传之前判断图片文件的大小是否合法了。

限制： K

我的一个项目里这样用（pendlehill）

function CheckFileSize()
{
var FileMaxSize = 100;//限制上传的文件大小，单位(k)
var s = document.RegForm.Img_1.value;
//if(s==""){alert("No image,please select again!");document.RegForm.Img_1.focus(); return false;}
var img = new Image();

img.src = s;

if(img.fileSize>FileMaxSize*1024){alert("The file size exceeds " FileMaxSize "K，please choose a smaller one!");document.RegForm.Img_1.focus();return false;}

//-->

我的一个项目里这样用（pendlehill）

CopyHoo 2008-12-11 23:51 发表评论

需要 fos 对象对客户端上传文件大小进行限制的例子

CopyHoo — Thu, 11 Dec 2008 15:44:00 GMT

发表于： 2007/06/01 02:20pm
问题已经解决了,回贴一下,与大家共享;如果大家有更好的解决办法,请尽快回复噢 javascript这样来写: //文件大小验证函数,超过规定的上限,就不让上传,给用户提示 //如果文件超过5M,就不让上传 function fileSizeValidate() { var filestr = document.all.UploadFile.value; var fso,f; fso=new ActiveXObject("Scripting.FileSystemObject"); f=fso.GetFile(filestr); if(f.size>510241024){ alert("The size of .dbf is more than 5M"); return false; } return true; } 页面里是这样的:

顶部

zhangxin	发表于： 2007/06/01 02:35pm
zhangxin	其实之前我也对文件类型做了判断,在此一并与大家共享一下: function pstn2ngnMigration(){ if (dbfFileNameValidate()){ if(fileSizeValidate()){ if(confirm("do you want to execute migration ?")){ lockSystem('please waiting...',false) setTimeout("dbfFileMigration()",3000); } } } } //判断是否是.DBF文件,是返回true function dbfFileNameValidate() { var filestr = document.all.UploadFile.value; if(filestr==""){ alert("Please select a migration file!"); document.all.UploadFile.focus(); return false; }else if(filestr.toLowerCase().lastIndexOf(".dbf")==-1){ alert("Please select a file with DBF extension !"); document.all.UploadFile.focus(); return false; } return true; } //条件成立,提交 function dbfFileMigration() { document.Uploadform.action="MigrationSendOrder.jsp"; document.Uploadform.submit(); unlockSystem(); } //上传文件大小限制 function fileSizeValidate() { var filestr = document.all.UploadFile.value; var fso,f; fso=new ActiveXObject("Scripting.FileSystemObject"); f=fso.GetFile(filestr); if(f.size>510241024){ alert("The size of .dbf is more than 5M"); return false; } return true; } 页面代码如下:

=====================================================
包括文件类型的判断：
function checkSize(files)
{
var fso,f;
fso=new ActiveXObject("Scripting.FileSystemObject");
f=fso.GetFile(files);
var mySize = f.size/1024;
alert(mySize+" K ");
}

CopyHoo 2008-12-11 23:44 发表评论

言简意赅的一篇 js 操作 dom

CopyHoo — Thu, 11 Dec 2008 05:35:00 GMT

Javascript dom操作

关键字: xml dom

用于处理XML文档的DOM元素属性

属性名	描述
childNodes	返回当前元素所有子元素的数组
firstChild	返回当前元素的第一个下级子元素
lastChild	返回当前元素的最后一个子元素
nextSibling	返回紧跟在当前元素后面的元素
nodeValue	指定表示元素值的读/写属性
parentNode	返回元素的父节点
previousSibling	返回紧邻当前元素之前的元素

用于遍历XML文档的DOM元素方法

方法名	描述
getElementById(id) (document)	获取有指定惟一ID属性值文档中的元素
getElementsByTagName(name)	返回当前元素中有指定标记名的子元素的数组
hasChildNodes()	返回一个布尔值，指示元素是否有子元素
getAttribute(name)	返回元素的属性值，属性由name指定

有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

CopyHoo 2008-12-11 13:35 发表评论

这是一个一应俱全的实例

CopyHoo — Thu, 11 Dec 2008 05:31:00 GMT

摘要: JAVASCRIPT中使用DOM操作XML文档
<body onload="alert(333);">
Hello world

<input type="button" value="点击我还刷新一下" onclick="alert(123);" />
body>

<input type="button" value="点击我还刷新一下" onclick="alert(123); window.location.reload();" />

return false;在什么情况下都不会刷新

CopyHoo 2008-12-09 17:44 发表评论

如果你 js 运用的很熟，这就是效果！ - 替换 html 实体字符

CopyHoo — Tue, 09 Dec 2008 09:42:00 GMT

对应的效果:

Groove Coverage-7 Years And 50 Days 谁能指教下是什么码？

是空格，那么 32对应ascii码？

/* 很精巧:  */
String.prototype.trueEntityReplace = function()
{
    return this.replace(/&#(\d+);?/g,
function(a, b)
{
        return String.fromCharCode(b)
    });
}

CopyHoo 2008-12-09 17:42 发表评论

你对 js 的掌握程度有多少?

CopyHoo — Tue, 09 Dec 2008 07:41:00 GMT

看看如上代码，你得到正确结果了吗？
告诉我，为什么。

CopyHoo 2008-12-09 15:41 发表评论

关于 readonly 与 disabled

CopyHoo — Tue, 09 Dec 2008 06:17:00 GMT

readonly 与 disabled 都可以防止用户键入，
两者的区别：
1. dsiabled 带有默认的样式，使文本框以及字体变灰，但是 readonly 不会
2. disabled 不会提交到后台！！！而 readonly 会随着表单一起提交到后台。

馊主意：
如果你喜欢 disabled 的变灰的样式，但是又懒得去用样样式表来更改，并且又需要提交到后台。
那么建议你可以这样，利用隐藏域...

Do you get it ?

CopyHoo 2008-12-09 14:17 发表评论

类似gmail添加附件

CopyHoo — Mon, 08 Dec 2008 11:42:00 GMT

摘要: 想做一个管理后面，想用到gmail添加附件的功能到添加产品图，找了很多源码都不合适，找到了一段，但在FF下有问题。 ++++++++++++++++ <... 阅读全文

CopyHoo 2008-12-08 19:42 发表评论

JavaScript 闭包

CopyHoo — Mon, 08 Dec 2008 03:57:00 GMT

所谓闭包，是指词法表示包括不必计算的变量的函数，也就是说，该函数能使用函数外定义的变量。
在 ECMAScript 中使用全局变量十一哥简单的闭包实例。考虑下面的代码:

在这段代码中，脚本被载入内存后，并未为函数 sayHelloWorld() 计算变量 sMessage 的值。该函数捕获 sMessage 的值只是为以后使用，也就是说，解释程序知道在调用该函数时要检查 sMessage 的值。sMessage 将在函数调用 sayHelloWorld()时（最后一行）被赋值，显示消息 "Hello World".
在一个函数中定义另一个函数会使闭包变得更加复杂，如下所示：

这里，函数 addNumbers() 包括函数 doAddition( 闭包)。内部函数是个闭包，因为它将获取外部函数的参数 iNum1 和 iNum2 以及全局变量 iBaseNum 的值。 addNumbers() 的最后一步 doAddition() 函数根本不接受参数，
它使用的值是从执行环境中获取的。
可以看到，闭包是 ECMAScript 中非常强大多用的一部分，可以用于执行复杂的计算。就像使用任何高级函数一样，在使用闭包时要当心，因为它们可能会变得非常复杂。

CopyHoo 2008-12-08 11:57 发表评论

仿163网盘无刷新文件上传系统

CopyHoo — Mon, 08 Dec 2008 03:04:00 GMT

摘要: 转自: http://www.cnblogs.com/cloudgamer/archive/2008/11/28/1314766.html? 本文仅供个人参考资料用，如果您搜索到此博文，请查看原文链接。效果预览: .fu_list { width:600px; background:#ebebeb; font-size:12px; } .fu_list td { p... 阅读全文

CopyHoo 2008-12-08 11:04 发表评论

测试博客园发表文章的 editor 的原理

CopyHoo — Sun, 07 Dec 2008 15:34:00 GMT

如果我直接在文本框中书写 script 的脚本，
这些脚本不会直接转义，而会直接成为网页的一部分？
我书写的代码为:

那么我如何组织处一个我能有动态的页面的代码?

也就是，我如果写一个 button ,并定义了 onclick 事件，那么用户在浏览该页面的时候，点击按钮，会触发 click 事件..

CopyHoo 2008-12-07 23:34 发表评论

仿 163 网盘无刷新文件上传效果 1>

CopyHoo — Sun, 07 Dec 2008 15:08:00 GMT

摘要: 阅读全文

CopyHoo 2008-12-07 23:08 发表评论

JS 抽象类的进一步理解

CopyHoo — Sun, 07 Dec 2008 10:23:00 GMT

     摘要:
这样，当在class1的实例中调用继承得到的initialize方法时，就会自动执行派生类中的oninit()方法。从这里也可以看到解释型语言执行的特点，它们只有在运行到某一个方法调用时，才会检查该方法是否存在，而不会向编译型语言一样在编译阶段就检查方法存在与否。JavaScript中则避免了这个问题。当然，如果希望在基类中添加虚方法的一个定义，也是可以的，只要在派生类中覆盖此方法即可。例如：
//定义一个抽象基类base，无构造函数
function base(){}
base.prototype={
     initialize:function(){
          this.oninit(); //调用了一个虚方法
     },
     oninit:function(){} //虚方法是一个空方法，由派生类实现
}

6.7.3 使用抽象类的示例
仍然以prototype-1.3.1为例，其中定义了一个类的创建模型：
//Class是一个全局对象，有一个方法create，用于返回一个类
var Class = {
   create: function() {
     return function() {
       this.initialize.apply(this, arguments);
     }
   }
}
这里Class是一个全局对象，具有一个方法create，用于返回一个函数（类），从而声明一个类，可以用如下语法：
var class1=Class.create();
这样和函数的定义方式区分开来，使JavaScript语言能够更具备面向对象语言的特点。现在来看这个返回的函数（类）：
function(){
      this.initialize.apply(this, arguments);
}
这个函数也是一个类的构造函数，当new这个类时便会得到执行。它调用了一个initialize方法，从名字来看，是类的构造函数。而从类的角度来看，它是一个虚方法，是未定义的。但这个虚方法的实现并不是在派生类中实现的，而是创建完一个类后，在prototype中定义的，例如prototype可以这样写：
var class1=Class.create();
class1.prototype={
      initialize:function(userName){
                      alert(“hello,”+userName);
      }
}
这样，每次创建类的实例时，initialize方法都会得到执行，从而实现了将类的构造函数和类成员一起定义的功能。其中，为了能够给构造函数传递参数，使用了这样的语句：
function(){
      this.initialize.apply(this, arguments);
}
实际上，这里的arguments是function()中所传进来的参数，也就是new class1(args)中传递进来的args，现在要把args传递给initialize，巧妙的使用了函数的apply方法，注意不能写成：
this.initialize(arguments);
这是将arguments数组作为一个参数传递给initialize方法，而apply方法则可以把arguments数组对象的元素作为一组参数传递过去，这是一种很巧妙的实现。
尽管这个例子在prototype-1.3.1中不是一个抽象类的概念，而是类的一种设计模式。但实际上可以把Class.create()返回的类看作所有类的共同基类，它在构造函数中调用了一个虚方法initialize，所有继承于它的类都必须实现这个方法，完成构造函数的功能。它们得以实现的本质就是对prototype的操作。

CopyHoo 2008-12-05 11:52 发表评论

JS 创建对象的几种方式

CopyHoo — Fri, 05 Dec 2008 03:45:00 GMT

CopyHoo 2008-12-05 11:45 发表评论