JavaScript事件冒泡应用实例 -pc6资讯

您的位置：首页 → 技术开发 → JAVA Script → JavaScript事件冒泡应用实例

JavaScript事件冒泡应用实例 时间：2010/2/19 21:18:00来源：本站整理作者：我要评论(0)

JavaScript事件冒泡应用实例：

在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。然而，在今天一些大型的WEB交互项目中，比如大型的WebGame项目，JavaScript事件冒泡影响是值得重视的。本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项。

如果你对JavaScript事件冒泡还没有什么印象，不妨先看看我之前写的一篇博客《JavaScript事件冒泡简介及应用》。本文讲究实用，不在对JavaScript事件冒泡基础知识进行过多的阐述。

在文章开始之前，现在先看看下面这样一个需求：下面HTML假设描述的是一个WebGame项目包裹栏（玩过网游的人应该知道什么是包裹栏或物品栏）的外框架，拖动这个包裹标题栏可以拖动这个包裹到页面上任何位置，而点击标题栏右侧的“×”关闭按钮可以关闭这个包裹栏的显示。你通过观察HTML结构，可以发现那个关闭按钮其实是一个A链接，而且是作为标题栏H5的子元素存在。要想拖动一个元素，我们会想到向拖动的句柄元素注册mousedown事件，而点击或“单击”关闭按钮就关闭这个包裹。根据这个需求，我们很快得到下面这样的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript事件冒泡实例一</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid blue}
#box h5 {margin:0

相关视频

没有数据

文章评论

查看所有0条评论>>

热门文章 JS文件中的中文在网页