如何动态触发控件的触发事件？

flyboy5018 2008-09-16 11:00:23
我的问题是这样的，我想在一个div标签中点击就会显示z-index=1的div内容。
但是怎么在元素失去焦点的时候使其不显示呢？怎么来设置这个触发事件？
我的完整代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text ml; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
div.year{
border:1px solid #EEB422;
background-color:#EEE685;
padding-top:5px;
padding-bottom:5px;
width:80px;
left:100px;
top:300px;
position:absolute;
text-align:center;
}
div.pop_year{
border:1px solid #EEB422;
background-color:#EEE685;
padding-top:5px;
padding-bottom:5px;
width:80px;
position:absolute;
left:0px;
top:0px;
z-index:1;
display:none;
text-align:center;
}
div.pop_year_one{
background-color:#EEE685;
padding-top:5px;
padding-bottom:5px;
}
</style>
</head>

<body>
<script language="javascript" type="text/javascript">
function popup_year()
{
obj_year=document.getElementById("id_year");
obj_popYear=document.getElementById("id_pop_year");
year_Rect=obj_year.getBoundingClientRect();
obj_popYear.style.left=year_Rect.left+"px";
obj_popYear.style.top=(year_Rect.top-5*obj_year.offsetHeight)+"px";
obj_popYear.style.width=obj_year.offsetWidth;
obj_popYear.style.height=11*obj_year.offsetHeight;
obj_popYear.style.display="block";
document.body.all["id_pop_year"].onblur=hidePop();
document.body.onclick=hidePop();
}
function hidePop()
{
document.getElementById("id_pop_year").style.display="none";
}
function selected(obj)
{
obj.style.backgroundColor="#FFD700";
obj.style.cursor="pointer";
}
function unselected(obj)
{
obj.style.backgroundColor="";
}
function testSelect()
{
document.getElementById("id_test").style.backgroundColor="#FFD700";
document.getElementById("id_test").onMouseOut=testUnselect();
}
function testUnselect()
{
document.getElementById("id_test").style.backgroundColor="";
}
</script>
<div>
<div class="year" onClick="popup_year()" id="id_year">2008</div>
<div class="pop_year" id="id_pop_year" onMouseOver="popup_year()">
<div class="pop_year_one" id="id_pop_year1" onMouseOver="selected(this)" onMouseOut="unselected(this)">2003</div>
<div class="pop_year_one" id="id_pop_year2" onMouseOver="selected(this)" onMouseOut="unselected(this)">2004</div>
<div class="pop_year_one" id="id_pop_year3" onMouseOver="selected(this)" onMouseOut="unselected(this)">2005</div>
<div class="pop_year_one" id="id_pop_year4" onMouseOver="selected(this)" onMouseOut="unselected(this)">2006</div>
<div class="pop_year_one" id="id_pop_year5" onMouseOver="selected(this)" onMouseOut="unselected(this)">2007</div>
<div class="pop_year_one" id="id_pop_year_center" onMouseOver="selected(this)" onMouseOut="unselected(this)">2008</div>
<div class="pop_year_one" id="id_pop_year6" onMouseOver="selected(this)" onMouseOut="unselected(this)">2009</div>
<div class="pop_year_one" id="id_pop_year7" onMouseOver="selected(this)" onMouseOut="unselected(this)">2010</div>
<div class="pop_year_one" id="id_pop_year8" onMouseOver="selected(this)" onMouseOut="unselected(this)">2011</div>
<div class="pop_year_one" id="id_pop_year9" onMouseOver="selected(this)" onMouseOut="unselected(this)">2012</div>
<div class="pop_year_one" id="id_pop_year10" onMouseOver="selected(this)" onMouseOut="unselected(this)">2013</div>
</div>

</div>
</body>
<html>
希望各位大侠能够指导小弟呀！
...全文
166 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
flyboy5018 2008-09-19
  • 打赏
  • 举报
 回复
谢谢各位大哥哈
orz_ORZ_orz 2008-09-17
  • 打赏
  • 举报
 回复
还有就是，你昨晚是想实现点击body隐藏你那个层是吧？
将就你代码改了下，ie, ff下自己去改了



<html>

<head>

<meta http-equiv="Content-Type" content="text ml; charset=utf-8">

<title>test </title>

<style type="text/css">

div.year{

border:1px solid #EEB422;

background-color:#EEE685;

padding-top:5px;

padding-bottom:5px;

width:80px;

left:100px;

top:300px;

position:absolute;

text-align:center;

}

div.pop_year{

border:1px solid #EEB422;

background-color:#EEE685;

padding-top:5px;

padding-bottom:5px;

width:80px;

position:absolute;

left:0px;

top:0px;

z-index:1;

display:none;

text-align:center;

}

div.pop_year_one{

background-color:#EEE685;

padding-top:5px;

padding-bottom:5px;

}

</style>

</head>



<body>

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

function popup_year()

{

obj_year=document.getElementById("id_year");

obj_popYear=document.getElementById("id_pop_year");

year_Rect=obj_year.getBoundingClientRect();

obj_popYear.style.left=year_Rect.left+"px";

obj_popYear.style.top=(year_Rect.top-5*obj_year.offsetHeight)+"px";

obj_popYear.style.width=obj_year.offsetWidth;

obj_popYear.style.height=11*obj_year.offsetHeight;

obj_popYear.style.display="block";

//document.body.all["id_pop_year"].onblur=hidePop();



}

function hidePop() {

	if(event.srcElement.tagName.toLowerCase()=="body") {

		if(document.getElementById("id_pop_year").style.display=="block") {

			document.getElementById("id_pop_year").style.display="none";

		}

	}

}

function selected(obj)

{

obj.style.backgroundColor="#FFD700";

obj.style.cursor="pointer";

}

function unselected(obj)

{

obj.style.backgroundColor="";

}

function testSelect()

{

document.getElementById("id_test").style.backgroundColor="#FFD700";

document.getElementById("id_test").onMouseOut=testUnselect();

}

function testUnselect()

{

document.getElementById("id_test").style.backgroundColor="";

}



document.body.onclick=function() {

hidePop();

}



</script>

<div>

<div class="year" onClick="popup_year()" id="id_year">2008 </div>

<div class="pop_year" id="id_pop_year" onMouseOver="javascript:this.style.display='block'">

<div class="pop_year_one" id="id_pop_year1" onMouseOver="selected(this)" onMouseOut="unselected(this)">2003 </div>

<div class="pop_year_one" id="id_pop_year2" onMouseOver="selected(this)" onMouseOut="unselected(this)">2004 </div>

<div class="pop_year_one" id="id_pop_year3" onMouseOver="selected(this)" onMouseOut="unselected(this)">2005 </div>

<div class="pop_year_one" id="id_pop_year4" onMouseOver="selected(this)" onMouseOut="unselected(this)">2006 </div>

<div class="pop_year_one" id="id_pop_year5" onMouseOver="selected(this)" onMouseOut="unselected(this)">2007 </div>

<div class="pop_year_one" id="id_pop_year_center" onMouseOver="selected(this)" onMouseOut="unselected(this)">2008 </div>

<div class="pop_year_one" id="id_pop_year6" onMouseOver="selected(this)" onMouseOut="unselected(this)">2009 </div>

<div class="pop_year_one" id="id_pop_year7" onMouseOver="selected(this)" onMouseOut="unselected(this)">2010 </div>

<div class="pop_year_one" id="id_pop_year8" onMouseOver="selected(this)" onMouseOut="unselected(this)">2011 </div>

<div class="pop_year_one" id="id_pop_year9" onMouseOver="selected(this)" onMouseOut="unselected(this)">2012 </div>

<div class="pop_year_one" id="id_pop_year10" onMouseOver="selected(this)" onMouseOut="unselected(this)">2013 </div>

</div>



</div>

</body>

<html>
orz_ORZ_orz 2008-09-17
  • 打赏
  • 举报
 回复
哈，lz就是昨天晚上在群里问问题的那个人吧？
我就是3.14......，onblur是不对的，onblur是失去输入焦点时才会触发的，
建议多看看书，不一定非要急着做出东西，理解是关键
qintao1203 2008-09-17
  • 打赏
  • 举报
 回复
onblur事件！
winform代码触发控件的点击事件
有些时候我们需要自动触发窗体某个控件的事件，这时应该怎么做呢，下面一起看一下：
C# 用于不同控件触发动作事件
同一Form中加载两个控件； 一个导航菜单控件 ， 一个显示控件； 在点击导航控件时，更改另一个控件中内容； 使用事件方式； 导航控件为发布者， 显示控件为订阅者； 发布者代码： public delegate void TitleChangeHandler(string title); //定义委托 public partial class Navigation : Us...
Vue子控件点击事件触发父控件点击事件
Vue子控件点击事件触发父控件点击事件 解决:在子控件的事件后面加 .stop @click.stop="getImg(item.envelopePic)"
WPF 忽略子控件事件触发父控件事件
IsHitTestVisible="False"   获取或设置此 UIElement 的包含区域是否可为命中测试   命中测试，则为 true；否则为 false。 默认值为 true。
C# 为控件添加自定义事件，自定义触发
先随便搞个事件吧 public class TestEventrgs : EventArgs { private string _name; public string Name { get { return _name; } } private int _age; public int Age { get { return _age; } } public TestEventrgs(string name,in
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章