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

快乐的2 2009-10-31 06:07:23
想做个伸缩栏，凡是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基础.
...全文
5585 22 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
javaors 2009-11-01
  • 打赏
  • 举报
 回复
我草，是你啊，这头像我第一眼就认出来了。-张明
加油，JS代码我从来都是网上找的，帮不了你了
blliy117 2009-11-01
  • 打赏
  • 举报
 回复
xxxxx.onclick= function(){closeConfirm();formsb();};

注意要小写

function里可以写n个方法！
goosman 2009-11-01
  • 打赏
  • 举报
 回复
[Quote=引用 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
[/Quote]

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

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

事件处理函数已经处于另外一个名称空间了， 那个时候，它的名称空间中是没有links的。。。所以会得到那个错误。
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
JS框架现在不会使用的，因为JS还没有弄明白，只想从基础学起。
emptylian 2009-10-31
  • 打赏
  • 举报
 回复
用jquery，
if ($('#a_id')[0] != null)
{
AddEventListener($('#a_id')[0], 'click', function(event){deal();}, false);
}
function deal(){

//doing
}
dengganxia 2009-10-31
  • 打赏
  • 举报
 回复
我很奇怪啊，楼主怎么得到list中的元素啊，不用iterator么？java中使用iterator的啊，不知道JS是不是一样- -！
wzju64676266 2009-10-31
  • 打赏
  • 举报
 回复
jf
老张-AI 2009-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 fandelei1982 的回复:]
难道楼主没试试我在6楼的写法.
[/Quote]

6楼不是你啊 。。

links[i].onclick = function() { toggleInfo(this.id);}
学习了
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 fandelei1982 的回复:]
难道楼主没试试我在6楼的写法.
[/Quote]
6楼的不是你写的，你写的刚才用时通过了。可以使用，就是原理不是很明白。
friendly_ 2009-10-31
  • 打赏
  • 举报
 回复
this在这里指的是function(){}的所有者,一般是调用者,说的不是很严格,大体就是那个意思.
this指向每个link[i]对象
friendly_ 2009-10-31
  • 打赏
  • 举报
 回复
难道楼主没试试我在6楼的写法.
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 fandelei1982 的回复:]
links[i].onclick = function() { toggleInfo(this.id);}
[/Quote]
这个测试通过,不过能讲讲原理么,为什么用links[i].onclick= function(){toggleInfo(links[i].id);};不能通过呢？而且从函数里讲的话this.id这个值在这里面并没有定义啊。
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
还有什么办法?最好在机器上测试通过的.
这个是可以使用的样板.把这个改成通过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>
friendly_ 2009-10-31
  • 打赏
  • 举报
 回复
links[i].onclick = function() { toggleInfo(this.id);}
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 lgg201 的回复:]
var a = document.getElementById(obj+'_list')
假设a就是你得到的一个a标签的DOM模型
那么, a.attachEvent(sEvent, fpNotify)就可以了.
参数sEvent是事件名称, 比如onclick对应就是'click', fpNotify就是一个函数对象.
[/Quote]
根据你所说的现代码更改为


<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
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 blliy117 的回复:]
你直接写成这样吧


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

[/Quote]
这样写的话onClick里面的属性就成了“未定义”那个英文了。也通不过。
goosman 2009-10-31
  • 打赏
  • 举报
 回复
你这个问题, 给a标签加事件怎么加, 属于html范畴, 你可以看DHTML的参考文档. 里面有每个元素的各种属性, 方法, 事件, 样式等等
快乐的2 2009-10-31
  • 打赏
  • 举报
 回复
不顶用啊，我用Maxthon测试的，第一种把href的值改成调用toggleInfo(links[i].id)就可以伸缩下面的div，现在赋值onClick就不能用。。。
goosman 2009-10-31
  • 打赏
  • 举报
 回复
javascript也是动态语言, eval('')可以接受一个字符串, 执行字符串中的语句, 并返回结果. 学javascript推荐看javascript高级程序设计.
goosman 2009-10-31
  • 打赏
  • 举报
 回复
var a = document.getElementById(obj+'_list')
假设a就是你得到的一个a标签的DOM模型
那么, a.attachEvent(sEvent, fpNotify)就可以了.
参数sEvent是事件名称, 比如onclick对应就是'click', fpNotify就是一个函数对象.
加载更多回复（2）
详解a标签添加onclick事件的几种方式
这种方法在传递this等参数的时候很容易出问题，而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发[removed]事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句 2....
a标签href属性和onclick事件的比较介绍
首先说一下， href属性 和 onclick事件 的执行顺序，当鼠标点击a标签的时候会先执行 onclick事件， 然后才是 href 属性下的动作（页面跳转，或 javascript 伪链接），如果不想执行href 属性下的动作执行，onclick ...
js a标签点击事件
这是最常见的处理方式，`<a>`标签的`href`属性设置为`javascript:void(0)`。`void`是一个JavaScript操作符，`void(0)`返回`undefined`，这意味着点击链接后浏览器不会尝试导航到任何地方。同时，`onclick`属性中绑定...
在JS中a标签加入单击事件屏蔽href跳转页面
这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且[removed]协议作为a的href属性的时候不仅会导致不必要的触发[removed]事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在...
Chart js Demo
在`options`中，我们可以修改`elements.line`的`tension`属性，将其设置为0，从而得到直角折线效果。这样，数据的变化趋势会更加明显，每个数据点的独立性也得以突出。 ```javascript var options = { ... scales...
Web 开发

81,122

社区成员

341,744

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章