js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()):
<!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" />
<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="/css/css.css" rel="stylesheet" type="text/css" />
<script>
window.onload=function(){
var oA=document.getElementsByTagName("a")[0];
oA.onclick=function(event){
event.preventDefault();
console.log("阻止了默认事件");
};
}
</script>
</head>
<body>
<a>aaa</a>
</body>
</html>
阻止事件冒泡(event.stopPropagation()):
<!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></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(event){
$("#z_body").slideDown(1000);
event.stopPropagation();
});
$("#z_body").click(function(event){
event.stopPropagation();
});
$(document).click(function(){
$("#z_body").slideUp();
})
});
</script>
<style>
*{margin:0px;padding:0px;}
body{max-320px;margin:0 auto;width:320px;}
#z_body{width:320px;height:auto;line-height:40px;background:#ccc;color:#000000;display:none;max-width:320px;margin-top:30px;}
#z_body ul{}
#z_body ul li{width:266px;;height:39px;line-height:39px;background:#40205d;border-top:1px solid #666666;border-bottom:1px solid #666666;list-style:none;font-size:16px;color:#fff;padding-left:54px;}
#btn{height:30px;display:block;text-align:center;font-weight:600;background:pink;width:320px;line-height:30px;position:fixed;top:0px;}
</style>
</head>
<body>
<a id="btn">菜单</a>
<div id="z_body">
<ul>
<li>网站首页</li>
<li>整形中心</li>
<li>皮肤中心</li>
<li>网站首页</li>
<li>整形中心</li>
<li>皮肤中心</li>
<li>网站首页</li>
</ul>
</div>
</body>
</html>
js之阻止事件冒泡(待修改)和阻止默认事件的更多相关文章
- 【JQuery】事件冒泡及使用jQuery阻止
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- vue中click阻止事件冒泡，防止触发另一个事件
在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...
- js区分鼠标单双击 阻止事件冒泡
function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...
- js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...
随机推荐
- 表单form的属性，单行文本框、密码框、单选多选按钮
基础表单结构: <body> <h1> <hr /> <form action="" name="myFrom" en ...
- 解析Json的谷歌官方方法Gson和阿里巴巴的fastJson方法。
//测试单个json文本 public void testGsonTwo(){ String jsonStr = "{\"id\":100,\"name\&qu ...
- 判断子元素（or属性）是否存在
if(typeof($("#aid").attr("rel"))=="undefined") 即可
- Grunt设置
Grunt完成对LESS实时编译. 安装 安装grunt需要先安装node.js. 之后需要借助npm来安装grunt-cli,在cmd中npm install -g grunt-cli.(测试gru ...
- daemon
关于daemon,其最简单的用法是: , ) == -) ; 将上面代码放置程序中,程序执行到这一行,就会自动进入后台运行,不再与终端交互,即终端再输入的参数无效,程序的输出(比如printf等)无效 ...
- UITableViewCell Property “icon” cannot be found in forward class object “DJWeiBo”
UITableViewCell 自定义表格 实体属性不显示错误 Property “icon” cannot be found in forward class object “DJWeiBo”引入实 ...
- 通过代码自定义cell 新浪微博页面显示
通过代码自定义cell(cell的高度不一致)(如果高度一致的cell 用xib实现) 1.新建一个集成自UItableVIewCell的类 2.重写initWithStle :方法 - (insta ...
- 组合——Program B
CodeForces 478B Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u De ...
- Map学习
1.Query Operations(查询操作) int size();boolean isEmpty(); boolean containsKey(Object key);boolean conta ...
- how to reset mac root password
Reset 10.5 Leopard & 10.6 Snow Leopard password Power on or restart your Mac. At the chime (or g ...