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 ...
随机推荐
- linux 磁盘管理以及维护
Linux系统中,进行频繁的读写操作,容易发送只读.以及磁盘损坏等故障.下文为其解决方案: 1.如何界定磁盘已经存在故障 方法一(界定将如下内容另存为Repair.sh然后执行即可): #!/bin/ ...
- laypage分页功能demo
demo代码如下: <div id="view1"></div> <div id="page1"></div> ...
- Windows内核对象
1. 内核对象 Windows中每个内核对象都只是一个内存块,它由操作系统内核分配,并只能由操作系统内核进行访问,应用程序不能在内存中定位这些数据结构并直接更改其内容.这个内存块是一个数据结构,其成员 ...
- 利用电话管理器TelephonyManager获取网络和SIM卡信息
import java.util.ArrayList;import java.util.HashMap;import java.util.Map; import android.os.Bundle;i ...
- Understanding Weak References
Understanding Weak References Posted by enicholas on May 4, 2006 at 5:06 PM PDT Some time ago I was ...
- SPOJ SUBLEX 求第k小子串
题目大意: 对于一个给定字符串,找到其所有不同的子串中排第k小的子串 先构建后缀自动机,然后我们可以将整个后缀自动机看做是一个DAG图,那么我们先进行拓扑排序得到 *b[N] 对于每个节点记录一个sc ...
- Android 圆形ProgressBar风格设置
Android系统自带的ProgressBar风格不是很好,如果想自己设置风格的话,一般有几种方法.首先介绍一下第一种方法通过动画实现.在res的anim下创建动画资源loading.xml: < ...
- 13个优秀的开源UML工具介绍
本文将为您介绍12个优秀的UML工具: 1. StarUML StarUML(简称SU),是一种创建UML类图,是一种生成类图和其他类型的统一建模语言(UML)图表的工具.StarUML是一个开源项目 ...
- 利用ps指令查看某个程序的进程状态
ps -ef是查看所有的进程,然后用grep筛选出你要的信息. eg.
- iOS 端的 UI 聊天组件ChatKit及代码实现
ChatKit 是一个免费且开源的 UI 聊天组件,自带云服务器,自带推送,支持消息漫游,消息永久存储.底层聊天服务基于LeanCloud(原名 AVOS ) 的 IM 实时通信服务「LeanMess ...