<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0128)http://bluebala.com/2009/07/%E5%85%BC%E5%AE%B9ie%E5%92%8Cfirefox%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%A8%A1%E5%9E%8B%E6%8B%96%E5%8A%A8/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD
profile=http://gmpg.org/xfn/11><TITLE>BlueBala » 兼容IE和Firefox的事件模型(拖动)</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<META content="DOM2, Drag, javaScript, javascript事件模型, JS事件模型, 拖动, "
name=keywords>
<META content=兼容IE和Firefox的事件模型(拖动) name=description><LINK
title="RSS 2.0 - 所有文章" href="http://feed.feedsky.com/BlueBala"
type=application/rss+xml rel=alternate><LINK title="RSS 2.0 - 所有评论"
href="http://bluebala.com/comments/feed/" type=application/rss+xml
rel=alternate><LINK href="http://bluebala.com/xmlrpc.php" rel=pingback><!-- style START --><!-- default style -->
<STYLE type=text/css media=screen>@import url( http://bluebala.com/wp-content/themes/inove/style.css );
</STYLE>
<!-- for translations --><LINK media=screen
href="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/chinese.css" type=text/css
rel=stylesheet><!--[if IE 6]>
<link rel="stylesheet" href="http://bluebala.com/wp-content/themes/inove/ie6.css" type="text/css" media="screen" />
<![endif]--><!-- style END --><!-- script START -->
<SCRIPT src="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/util.js"
type=text/javascript></SCRIPT>
<SCRIPT src="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/menu.js"
type=text/javascript></SCRIPT>
<!-- script END --><LINK title="BlueBala » 兼容IE和Firefox的事件模型(拖动) 评论 Feed"
href="http://bluebala.com/2009/07/%e5%85%bc%e5%ae%b9ie%e5%92%8cfirefox%e7%9a%84%e4%ba%8b%e4%bb%b6%e6%a8%a1%e5%9e%8b%e6%8b%96%e5%8a%a8/feed/"
type=application/rss+xml rel=alternate><LINK id=wp-pagenavi-css media=all
href="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/pagenavi-css.css" type=text/css
rel=stylesheet><LINK title=RSD href="http://bluebala.com/xmlrpc.php?rsd"
type=application/rsd+xml rel=EditURI><LINK
href="http://bluebala.com/wp-includes/wlwmanifest.xml"
type=application/wlwmanifest+xml rel=wlwmanifest><LINK title=BlueBala
href="http://bluebala.com" rel=index><LINK title=BlueBala诞生记
href="http://bluebala.com/2009/01/bluebala%e8%af%9e%e7%94%9f%e8%ae%b0/"
rel=start><LINK title=:-) href="http://bluebala.com/2009/07/230/" rel=prev><LINK
title=HTML5新元素–Canvas href="http://bluebala.com/2009/07/html5-canvas1/"
rel=next>
<META content="MSHTML 6.00.6000.16481" name=GENERATOR><!-- Start Of Script Generated By CodeBox --><LINK media=screen
href="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/codebox.css" type=text/css
rel=stylesheet>
<SCRIPT language=javascript
src="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/jquery.js"
type=text/javascript></SCRIPT>
<SCRIPT language=javascript
src="BlueBala%20»%20兼容IE和Firefox的事件模型(拖动)_files/codebox.js"
type=text/javascript></SCRIPT>
<!-- End Of Script Generated By CodeBox -->
<STYLE type=text/css>.recentcomments A {
PADDING-RIGHT: 0px! important; DISPLAY: inline! important; PADDING-LEFT: 0px! important; PADDING-BOTTOM: 0px! important; MARGIN: 0px; PADDING-TOP: 0px! important
}
</STYLE>
<!-- wp thread comment 1.4.9.4.002 -->
<STYLE type=text/css media=screen>.editComment {
DISPLAY: inline
}
.editableComment {
DISPLAY: inline
}
.textComment {
DISPLAY: inline
}
.comment-childs {
BORDER-RIGHT: #999 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #999 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; MARGIN: 5px 2px 2px 4px; BORDER-LEFT: #999 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #999 1px solid; BACKGROUND-COLOR: white
}
.chalt {
BACKGROUND-COLOR: #e2e2e2
}
#newcomment {
BORDER-RIGHT: #777 1px dashed; BORDER-TOP: #777 1px dashed; BORDER-LEFT: #777 1px dashed; WIDTH: 90%; BORDER-BOTTOM: #777 1px dashed
}
#newcommentsubmit {
COLOR: red
}
.adminreplycomment {
BORDER-RIGHT: #777 1px dashed; PADDING-RIGHT: 4px; BORDER-TOP: #777 1px dashed; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; MARGIN: 4px; BORDER-LEFT: #777 1px dashed; WIDTH: 99%; PADDING-TOP: 4px; BORDER-BOTTOM: #777 1px dashed
}
.mvccls {
COLOR: #999
}
</STYLE>
</HEAD>
<BODY><!-- wrap START -->
<DIV id=wrap><!-- container START -->
<DIV id=container><!-- header START -->
<DIV id=header>
<DIV id=caption>
<H1 id=title><A href="http://bluebala.com/">BlueBala</A></H1>
<DIV id=tagline>关注web发展……</DIV></DIV><!-- navigation START -->
<DIV id=navigation>
<UL id=menus>
<LI class=page_item><A class=home title=首页 href="http://bluebala.com/">首页</A>
<LI class="cat-item cat-item-1"><A title="查看 叽叽歪歪 下的所有文章"
href="http://bluebala.com/category/%e5%8f%bd%e5%8f%bd%e6%ad%aa%e6%ad%aa/">叽叽歪歪</A>
<LI class="cat-item cat-item-19"><A title="查看 学习笔记 下的所有文章"
href="http://bluebala.com/category/%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/">学习笔记</A>
<LI class="cat-item cat-item-11"><A title="查看 技术八卦 下的所有文章"
href="http://bluebala.com/category/%e6%8a%80%e6%9c%af%e5%85%ab%e5%8d%a6/">技术八卦</A>
<LI class="cat-item cat-item-38"><A title="查看 纪录片 下的所有文章"
href="http://bluebala.com/category/%e7%ba%aa%e5%bd%95%e7%89%87/">纪录片</A>
<LI class="page_item page-item-2"><A title=关于
href="http://bluebala.com/about/">关于</A>
<LI class="page_item page-item-163"><A title=Twitter
href="http://bluebala.com/twitter/">Twitter</A> <!--
if($options['menu_type'] == 'categories') {
wp_list_categories('depth=2&title_li=0&orderby=name&show_count=0');
} else {
wp_list_pages('depth=2&title_li=0&sort_column=menu_order');
}
-->
<LI><A class=lastmenu href="javascript:void(0);"></A></LI></UL><!-- searchbox START -->
<DIV id=searchbox>
<FORM action=http://bluebala.com method=get>
<DIV class=content><INPUT class=textfield size=24 name=s> <SPAN
class=switcher>切换搜索引擎</SPAN> </DIV></FORM></DIV><!-- searchbox END -->
<DIV class=fixed></DIV></DIV><!-- navigation END -->
<DIV class=fixed></DIV></DIV><!-- header END --><!-- content START -->
<DIV id=content><!-- main START -->
<DIV id=main>
<DIV id=postpath><A title=转到首页 href="http://bluebala.com/">首页</A> > <A
title="查看 学习笔记 的全部文章"
href="http://bluebala.com/category/%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0/"
rel="category tag">学习笔记</A> > 兼容IE和Firefox的事件模型(拖动) </DIV>
<DIV class=post id=post-239>
<H2>兼容IE和Firefox的事件模型(拖动)</H2>
<DIV class=info><SPAN class=date>2009年7月19日</SPAN>
<DIV class=act><SPAN class=comments><A
href="http://bluebala.com/2009/07/%E5%85%BC%E5%AE%B9ie%E5%92%8Cfirefox%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%A8%A1%E5%9E%8B%E6%8B%96%E5%8A%A8/#comments">阅读评论</A></SPAN>
<SPAN class=addcomment><A
href="http://bluebala.com/2009/07/%E5%85%BC%E5%AE%B9ie%E5%92%8Cfirefox%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%A8%A1%E5%9E%8B%E6%8B%96%E5%8A%A8/#respond">发表评论</A></SPAN>
<DIV class=fixed></DIV></DIV>
<DIV class=fixed></DIV></DIV>
<DIV class=content>
<P>此例基于犀牛书《javaScrip权威指南》部分章节重新整理,要了解更多细节,请移步此书!学javaScript此书太经典,推荐之:<A
href="http://product.dangdang.com/product.aspx?product_id=20019046"
target=_blank>当当网链接</A> ——虽然它很贵!</P>
<P>javaScript的初学者无一例外是从处理各种各样的 onclick (或者onmousedown/onkeypress….)
过程开始,而onclick就是一个事件,在HTML元素中指定对应事件的处理方法,浅显易懂