<div id="mz_ico">
编辑器标签
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_font_size" title="字体大小"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_bold" title="加粗"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_italic" title="斜体"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_underline" title="下划线"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_justifyleft" title="内容居左"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_justifycenter" title="内容居中"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_justifyright" title="内容居右"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_link" title="添加链接"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_unlink" title="删除链接"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_font_color" title="字体颜色"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_upload_img" title="上传图片"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_smiles" title="插入表情"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_media" title="插入视频"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_flash" title="插入flash"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_unhtml" title="删除格式"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_help" title="使用帮助"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_html" title="代码模式"></span>
</span>// 浮动层 字体大小
<div id="mz_font_size" style="display:none">
<span class="mz_font_size" style="font-size:9px">9px</span>
<span class="mz_font_size" style="font-size:10px">10px</span>
<span class="mz_font_size" style="font-size:12px">12px</span>
<span class="mz_font_size" style="font-size:14px">14px</span>
<span class="mz_font_size" style="font-size:16px">16px</span>
<span class="mz_font_size" style="font-size:18px">18px</span>
<span class="mz_font_size" style="font-size:24px">24px</span>
<span class="mz_font_size" style="font-size:32px">32px</span>
</div>// 浮动层 字体颜色
<table id="mz_font_color" cellspacing="0" cellpadding="0" border="0" style="display:none">
<tbody>
<tr>
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
</tr>
<tr>
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
</tr>
</tbody>
</table>
</div>我现在想通过绑定顶层的 mz_ico ID 然后下面子元素 span table里的td元素 可以响应鼠标事件,mousemove,mouseout,mousedown,这3个事件,然后分别执行不同的函数改变当前的样式。比如隐藏浮动层,等等操作。
这个东西折腾我好几天了,不要告诉我在HTML 里加mousemove这样答案,我要DOM 标准模式的
编辑器标签
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_font_size" title="字体大小"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_bold" title="加粗"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_italic" title="斜体"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_underline" title="下划线"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_justifyleft" title="内容居左"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_justifycenter" title="内容居中"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_justifyright" title="内容居右"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_link" title="添加链接"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_unlink" title="删除链接"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_font_color" title="字体颜色"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_upload_img" title="上传图片"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_smiles" title="插入表情"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_media" title="插入视频"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_flash" title="插入flash"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_unhtml" title="删除格式"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_help" title="使用帮助"></span>
</span>
<span class="mz_icon_inline">
<span class="mz_icon_url mz_ico_html" title="代码模式"></span>
</span>// 浮动层 字体大小
<div id="mz_font_size" style="display:none">
<span class="mz_font_size" style="font-size:9px">9px</span>
<span class="mz_font_size" style="font-size:10px">10px</span>
<span class="mz_font_size" style="font-size:12px">12px</span>
<span class="mz_font_size" style="font-size:14px">14px</span>
<span class="mz_font_size" style="font-size:16px">16px</span>
<span class="mz_font_size" style="font-size:18px">18px</span>
<span class="mz_font_size" style="font-size:24px">24px</span>
<span class="mz_font_size" style="font-size:32px">32px</span>
</div>// 浮动层 字体颜色
<table id="mz_font_color" cellspacing="0" cellpadding="0" border="0" style="display:none">
<tbody>
<tr>
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
</tr>
<tr>
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
<td class="mz_icon_inline">
</tr>
</tbody>
</table>
</div>我现在想通过绑定顶层的 mz_ico ID 然后下面子元素 span table里的td元素 可以响应鼠标事件,mousemove,mouseout,mousedown,这3个事件,然后分别执行不同的函数改变当前的样式。比如隐藏浮动层,等等操作。
这个东西折腾我好几天了,不要告诉我在HTML 里加mousemove这样答案,我要DOM 标准模式的
解决方案 »
- Text框中文与英文长度限制问题
- activex控件问题.
- 光标离开事件
- 在showModalDialog 中弹出页面A,在弹出的页面A中向自己提交(form)为何又弹出一个页面?
- 基于java web网络相册源代码
- 求救,关于框架中的框架问题。
- 如何让IE不自动记录登陆密码框的密码?
- 如何在网页上实现windows风格的颜色选择器?
- 谁有在客户端把页面另存为word(excel)的java脚本,最好是butten触发
- nodejs后台接口问题
- 用jquery的load方法载入某个页面,如何使该页面上的$(document).ready在callback之前执行。
- 在做json解析list时出错了。。。请大侠们看哈是那里的问题啊?
<html>
<head>
<style>
#div1{color:blue;}
#div1:hover{color:black;}
</style>
<script>
/**
* 为需要设置的dom添加事件
* @object el
* 需要添加事件的dom对象
* @object listeners
* 需要添加的事件,click mouseover mousedown keydown keypress keyup ……
* @function fun
* 事件调用的方法
*/
function addEvent(el,listeners,fun,scope){
var tmpFun=function(event){
event=event||window.event;
fun(scope||el,event);
}
try{
el.addEventListener(listeners,tmpFun,true);
}
catch(ex){
el.attachEvent('on'+listeners,tmpFun,true);
}
}
/**
* 以mouseover为例,定义一个事件调用的函数,改函数有两个参数,第一个是触发事件时函数的作用域(一般就是触发事件的dom对象),第二个是事件对象
*/
var mouseover=function(el,event){
alert('mouseover '+el.id);
}
/**
* 这个例子用于测试事件函数作用域
*/
var testScope={id:'作用域'};
var mouseout=function(el,event){
alert('mouseout '+el.id);
}
var mousedown=function(el,event){
alert('mousedown');
}
</script>
</head><body>
<div id='div1'>右键测试</div>
<script>
addEvent(document.getElementById('div1'),'mouseover',mouseover);
addEvent(document.getElementById('div1'),'mouseout',mouseout,testScope);//这里添加事件时修改了事件函数的作用域
addEvent(document.getElementById('div1'),'mousedown',mousedown);
</script>
</body>
</html>PS:mouseover和mouseout修改样式建议用CSS伪类
div.onmouseover = function(event){
var target = event.target || event.srcElement;
if(target.tagName === 'TD'){
// Todo...
}
}mouseout,mousedown事件同理
div.onmouseover = function(e){
var event = e || window.event,
target = event.target || event.srcElement;
if(target.tagName === 'TD'){
// Todo...
}
}mouseout,mousedown事件同理