如何在JS里给链接a标签设置onClick属性？-CSDN论坛

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322 结帖率 100%

想做个伸缩栏，凡是id中带有manager字串的a标签都在网页加载后自动注册onClick属性。
问题是我这么调用JS执行之后注册的onClick不执行，又不想更改a标签的href属性。最下面的JS是加载后自动注册如上所述的功能。连接中onClick属性执行toggleInfo函数，通过传递其id值，toggleInfo函数寻找其id值后加上_list的div使其显示或隐藏.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>左侧栏</title>

<script language="javascript">

function toggleInfo(obj){

	if(document.getElementById(obj+'_list').style.display!=''){

		document.getElementById(obj+'_list').style.display='';



	}else{

		document.getElementById(obj+'_list').style.display='none';



	}

}

function closeAllList(){

	var list = document.getElementsByTagName("div");

	for(var i = 0; i < list.length; i++){

		if(list[i].id.indexOf('_list')>0){

			list[i].style.display="none";

		}

	}

}

</script>

</head>



<body bgcolor="#993399" onLoad="doInit()">

<ul compact="compact" lang="el">

<button id="listManager" value="-" onClick="closeAllList()"></button><li lang="af"><a href="#" id="customer_manager">管理会员</a></li>

<div id="customer_manager_list">

customer

</div>

<li><a href="#" id="owner_manager">管理商家</a></li>

<div id="owner_manager_list">

owner

</div>

<li><a href="#" id="order_manager">管理订单</a></li>

<div id="order_manager_list">

order

</div>

<li><a href="#" id="ware_manager" onClick="">管理商品</a></li>

<div id="ware_manager_list">

ware

</div>

<li><a href="javascript:closeAllList();">关闭所有</a></li>

</ul>



<script language="javascript" type="text/javascript">

function doInit(){

	var links = document.getElementsByTagName("a");

	for(var i = 0; i < links.length; i++){

		if(links[i].id.indexOf("manager")>0){

			//links[i].href="javascript:toggleInfo('"+links[i].id+"');"; 第一种方法。

			links[i].onClick="toggleInfo('"+links[i].id+"')";//看源码可以看到onClick属性，但是不执行。

			/*if (links[i].addEventListener) {

				links[i].addEventListener("click", toggleInfo(links[i].id), false);

			} else if (links[i].attachEvent) {

				links[i].attachEvent("onclick", function(){toggleInfo(links[i].id);});

			}*/

		}

	}

}

doInit();

</script>

</body>

</html>

看看怎么解决吧.没有答案的话只能使用第一种方法了,主要想为了以后做Ajax的时候学点JS基础.

0 2009-10-31 18:07:23

回复数 22 只看楼主引用举报楼主

⋅android边框能只定义左边框吗 ⋅回归csdn，发点分 ⋅散粉，工作累了，散点粉！ 更多帖子 关注私信空间博客 blliy117 本版专家分：5436: links[i].onClick=  function xxxx(){

};
这样试试

0 2009-10-31 18:10:42

只看TA 引用举报 #1    得分 3

⋅android边框能只定义左边框吗 ⋅回归csdn，发点分 ⋅散粉，工作累了，散点粉！ 更多帖子 关注私信空间博客 blliy117 本版专家分：5436: 你直接写成这样吧

links[i].onClick=toggleInfo(links[i].id);

0 2009-10-31 18:12:16

只看TA 引用举报 #2 得分 0

⋅goosman的留言板 ⋅看到关门消息吓得赶紧散个分 ⋅我发布的工程是成长话题的帖子为什么被删除 更多帖子 关注私信空间博客 goosman 本版专家分：6270 版主: var a = document.getElementById(obj+'_list')
假设a就是你得到的一个a标签的DOM模型
那么, a.attachEvent(sEvent, fpNotify)就可以了.
参数sEvent是事件名称, 比如onclick对应就是'click', fpNotify就是一个函数对象.

0 2009-10-31 18:14:20

只看TA 引用举报 #3 得分 10

⋅goosman的留言板 ⋅看到关门消息吓得赶紧散个分 ⋅我发布的工程是成长话题的帖子为什么被删除 更多帖子 关注私信空间博客 goosman 本版专家分：6270 版主: javascript也是动态语言, eval('')可以接受一个字符串, 执行字符串中的语句, 并返回结果. 学javascript推荐看javascript高级程序设计.

0 2009-10-31 18:15:27

只看TA 引用举报 #4 得分 0

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322: 不顶用啊，我用Maxthon测试的，第一种把href的值改成调用toggleInfo(links[i].id)就可以伸缩下面的div，现在赋值onClick就不能用。。。

0 2009-10-31 18:15:50

只看TA 引用举报 #5 得分 0

⋅goosman的留言板 ⋅看到关门消息吓得赶紧散个分 ⋅我发布的工程是成长话题的帖子为什么被删除 更多帖子 关注私信空间博客 goosman 本版专家分：6270 版主: 你这个问题, 给a标签加事件怎么加, 属于html范畴, 你可以看DHTML的参考文档. 里面有每个元素的各种属性, 方法, 事件, 样式等等

0 2009-10-31 18:16:30

只看TA 引用举报 #6 得分 0

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322: 引用 2 楼 blliy117 的回复:
你直接写成这样吧

links[i].onClick=toggleInfo(links[i].id);

这样写的话onClick里面的属性就成了“未定义”那个英文了。也通不过。

0 2009-10-31 18:17:56

只看TA 引用举报 #7 得分 0

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322

引用 3 楼 lgg201 的回复:

var a = document.getElementById(obj+'_list')
假设a就是你得到的一个a标签的DOM模型
那么, a.attachEvent(sEvent, fpNotify)就可以了.
参数sEvent是事件名称, 比如onclick对应就是'click', fpNotify就是一个函数对象.

根据你所说的现代码更改为



<script language="javascript" type="text/javascript">

function doInit(){

	var links = document.getElementsByTagName("a");

	for(var i = 0; i < links.length; i++){

		if(links[i].id.indexOf("manager")>0){

			//links[i].href="javascript:toggleInfo('"+links[i].id+"');"; 第一种方法。

			//links[i].onClick=function xx(){toggleInfo(links[i].id);};

			//links[i].addEventListener(toggleInfo(links[i].id);};

			var fp = function(){toggleInfo(links[i].id);};//第56行

			links[i].attachEvent("onclick",fp);

			/*if (links[i].addEventListener) {

				links[i].addEventListener("click", toggleInfo(links[i].id), false);

			} else if (links[i].attachEvent) {

				links[i].attachEvent("onclick", function(){toggleInfo(links[i].id);});

			}*/

		}

	}

}

doInit();

</script>

产生错误：
Line:56
Char:24
Code:0
Error:'links[...].id' 为空或不是对象
网址:file:///C:/Tomcat%205.5/webapps/mysite/left.html

0 2009-10-31 18:26:51

只看TA 引用举报 #8 得分 0

⋅辞职，散分 ⋅辞职了，找工作中，散分～～～ 更多帖子 关注私信空间博客 friendly_ 本版专家分：920 黄花 2009年12月其他开发语言大版内专家分月排行榜第二 2009年11月其他开发语言大版内专家分月排行榜第二: links[i].onclick = function() { toggleInfo(this.id);}

0 2009-10-31 18:27:39

只看TA 引用举报 #9 得分 26

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322

还有什么办法?最好在机器上测试通过的.
这个是可以使用的样板.把这个改成通过onClick属性执行的,而不是通过href里面的JavaScript语句执行.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>左侧栏</title>

<script language="javascript">

function toggleInfo(obj){

	if(document.getElementById(obj+'_list').style.display!=''){

		document.getElementById(obj+'_list').style.display='';



	}else{

		document.getElementById(obj+'_list').style.display='none';



	}

}

function closeAllList(){

	var list = document.getElementsByTagName("div");

	for(var i = 0; i < list.length; i++){

		if(list[i].id.indexOf('_list')>0){

			list[i].style.display="none";

		}

	}

}

</script>

</head>



<body bgcolor="#993399" onLoad="doInit()">

<ul compact="compact" lang="el">

<button id="listManager" value="-" onClick="closeAllList()"></button><li lang="af"><a href="#" id="customer_manager">管理会员</a></li>

<div id="customer_manager_list">

customer

</div>

<li><a href="#" id="owner_manager">管理商家</a></li>

<div id="owner_manager_list">

owner

</div>

<li><a href="#" id="order_manager">管理订单</a></li>

<div id="order_manager_list">

order

</div>

<li><a href="#" id="ware_manager" onClick="">管理商品</a></li>

<div id="ware_manager_list">

ware

</div>

<li><a href="javascript:closeAllList();">关闭所有</a></li>

</ul>



<script language="javascript" type="text/javascript">

function doInit(){

	var links = document.getElementsByTagName("a");

	for(var i = 0; i < links.length; i++){

		if(links[i].id.indexOf("manager")>0){

			links[i].href="javascript:toggleInfo('"+links[i].id+"');"; 

		}

	}

}

doInit();

</script>

</body>

</html>

0 2009-10-31 18:31:21

只看TA 引用举报 #10 得分 0

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322: 引用 9 楼 fandelei1982 的回复:
links[i].onclick = function() { toggleInfo(this.id);}

这个测试通过,不过能讲讲原理么,为什么用links[i].onclick= function(){toggleInfo(links[i].id);};不能通过呢？而且从函数里讲的话this.id这个值在这里面并没有定义啊。

0 2009-10-31 18:34:42

只看TA 引用举报 #11 得分 0

friendly_ 本版专家分：920 黄花 2009年12月其他开发语言大版内专家分月排行榜第二 2009年11月其他开发语言大版内专家分月排行榜第二: 难道楼主没试试我在6楼的写法.

0 2009-10-31 18:36:55

只看TA 引用举报 #12 得分 0

⋅辞职，散分 ⋅辞职了，找工作中，散分～～～ 更多帖子 关注私信空间博客 friendly_ 本版专家分：920 黄花 2009年12月其他开发语言大版内专家分月排行榜第二 2009年11月其他开发语言大版内专家分月排行榜第二: this在这里指的是function(){}的所有者,一般是调用者,说的不是很严格,大体就是那个意思.
this指向每个link[i]对象

0 2009-10-31 18:41:34

只看TA 引用举报 #13 得分 0

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322: 引用 12 楼 fandelei1982 的回复:
难道楼主没试试我在6楼的写法.

6楼的不是你写的，你写的刚才用时通过了。可以使用，就是原理不是很明白。

0 2009-10-31 18:42:31

只看TA 引用举报 #14 得分 0

⋅兔子党-大胡子的留言板 ⋅再来散一贴 ⋅突然就想上下CSDN了，散个分 更多帖子 关注私信空间博客 兔子党-大胡子 本版专家分：37546 版主 红花 2009年11月 Java大版内专家分月排行榜第一 黄花 2010年2月 Java大版内专家分月排行榜第二 蓝花 2011年7月 Java大版内专家分月排行榜第三 2010年1月 Java大版内专家分月排行榜第三 2009年12月 Java大版内专家分月排行榜第三: 引用 12 楼 fandelei1982 的回复:
难道楼主没试试我在6楼的写法.

6楼不是你啊。。

links[i].onclick = function() { toggleInfo(this.id);}
学习了

1 2009-10-31 18:56:30

只看TA 引用举报 #15 得分 0

⋅lt26i android系统刷机问题 ⋅编译一个比较疑惑的问题 ⋅这是书籍的误导吗？ 更多帖子 关注私信空间博客 wzju64676266 本版专家分：2592: jf

0 2009-10-31 18:58:44

只看TA 引用举报 #16 得分 0

⋅屏幕某点的色值，显卡不一样会不一样么 ⋅大大们推荐本VBS书给我吧， ⋅大大们推荐本VBS书给我吧， 更多帖子 关注私信空间博客 dengganxia 本版专家分：69: 我很奇怪啊，楼主怎么得到list中的元素啊，不用iterator么？java中使用iterator的啊，不知道JS是不是一样- -！

0 2009-10-31 19:19:57

只看TA 引用举报 #17 得分 0

⋅谁有jawe下载，传一个给我，或者提供一个链接，多谢 ⋅together workflow 编辑怎么样保存xpdl代码？ ⋅lucence 更多帖子 关注私信空间博客 emptylian 本版专家分：299: 用jquery，
if ($('#a_id')[0] != null)
{
AddEventListener($('#a_id')[0], 'click', function(event){deal();}, false);
}
function deal(){

//doing
}

0 2009-10-31 19:24:09

只看TA 引用举报 #18 得分 3

⋅艾玛，我也是老鸟了，祝所有老鸟事业顺利。 ⋅大神求助:服务器疑是被攻击,netstat命令看到连接有很多国外IP ⋅求动态优秀报表框架,200分大奉献,无结果不结贴 更多帖子 关注私信空间博客 快乐的2 本版专家分：3322: JS框架现在不会使用的，因为JS还没有弄明白，只想从基础学起。

0 2009-10-31 19:33:57

只看TA 引用举报 #19 得分 0

⋅goosman的留言板 ⋅看到关门消息吓得赶紧散个分 ⋅我发布的工程是成长话题的帖子为什么被删除 更多帖子 关注私信空间博客 goosman 本版专家分：6270 版主: 引用 8 楼 zyb134506 的回复:
引用 3 楼 lgg201 的回复:
var a = document.getElementById(obj+'_list')
假设a就是你得到的一个a标签的DOM模型
那么, a.attachEvent(sEvent, fpNotify)就可以了.
参数sEvent是事件名称, 比如onclick对应就是'click', fpNotify就是一个函数对象.

根据你所说的现代码更改为
HTML code<scriptlanguage="javascript" type="text/javascript">function doInit(){var links= document.getElementsByTagName("a");for(var i=0; i< links.length; i++){if(links[i].id.indexOf("manager")>0){//links[i].href="javascript:toggleInfo('"+links[i].id+"');"; 第一种方法。//links[i].onClick=function xx(){toggleInfo(links[i].id);};//links[i].addEventListener(toggleInfo(links[i].id);};var fp=function(){toggleInfo(links[i].id);};//第56行            links[i].attachEvent("onclick",fp);/*if (links[i].addEventListener) {
                links[i].addEventListener("click", toggleInfo(links[i].id), false);
            } else if (links[i].attachEvent) {
                links[i].attachEvent("onclick", function(){toggleInfo(links[i].id);});
            }*/
        }
    }
}
doInit();</script>
产生错误：
Line:56
Char:24
Code:0
Error:'links[...].id' 为空或不是对象
网址:file:///C:/Tomcat%205.5/webapps/mysite/left.html

是你的事件处理函数中使用links【id】导致的

你可以看一看javascript中的名称空间的概念

事件处理函数已经处于另外一个名称空间了，那个时候，它的名称空间中是没有links的。。。所以会得到那个错误。

0 2009-11-01 17:54:21

只看TA 引用举报 #20    得分 5

⋅android边框能只定义左边框吗 ⋅回归csdn，发点分 ⋅散粉，工作累了，散点粉！ 更多帖子 关注私信空间博客 blliy117 本版专家分：5436: xxxxx.onclick= function(){closeConfirm();formsb();};

注意要小写

function里可以写n个方法！

0 2009-11-01 18:36:06

只看TA 引用举报 #21 得分 3

⋅关于HASHMAP 和while循环的查询效率问题 ⋅关于weblogic线程阻塞问题。 ⋅高效率拼接字符串 更多帖子 关注私信空间博客 javaors 本版专家分：2422: 我草，是你啊，这头像我第一眼就认出来了。-张明
加油，JS代码我从来都是网上找的，帮不了你了

0 2009-11-01 21:44:32

只看TA 引用举报 #22 得分 0

如何在JS里给链接a标签设置onClick属性？ [问题点数：50分，结帖人zyb134506]