阻止默认事件(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之阻止事件冒泡(待修改)和阻止默认事件的更多相关文章

  1. 【JQuery】事件冒泡及使用jQuery阻止

    (1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...

  2. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  3. vue中click阻止事件冒泡，防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  4. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  5. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  6. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  7. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  8. js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  9. js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

随机推荐

  1. 转：Nginx配置指令location匹配符优先级和安全问题

    转:http://www.jb51.net/article/47761.htm 使用nginx 很久了,它的性能高,稳定性表现也很好,得到了很多人的认可.特别是它的配置,有点像写程序一样,每行命令结尾 ...

  2. c++实现之 -- 汉语词语的简单处理

    好了,我们现在已经会怎样读入了,然后就是研究一下如何存储等一些细节上的的问题了. 首先,比较函数是不能传入char*的地址的,但是可以接受一个string类. 然而,如果是两个比较长的string类, ...

  3. [转]C#综合揭秘——细说进程、应用程序域与上下文之间的关系

    引言 本文主要是介绍进程(Process).应用程序域(AppDomain)..NET上下文(Context)的概念与操作.虽然在一般的开发当中这三者并不常用,但熟悉三者的关系,深入了解其作用,对提高 ...

  4. [转]Windows的窗口刷新机制

    1.Windows的窗口刷新管理 窗口句柄(HWND)都是由操作系统内核管理的,系统内部有一个z-order序列,记录着当前窗口从屏幕底部(假象的从屏幕到眼睛的方向),到屏幕最高层的一个窗口句柄的排序 ...

  5. 随机分类器的ROC和Precision-recall曲线

    随机分类器,也就是对于一个分类问题,随机猜测答案.理论上,随机分类器的性能是所有分类器的下界.对随机分类器的理解,可以帮助更好的理解分类器的性能指标.随机分类器的性能也可以作为评价分类器的一个基础.所 ...

  6. http://bootswatch.com/

    http://bootswatch.com/ http://v3.bootcss.com/examples/dashboard/

  7. wp8.1 Study14 FilePicker简单介绍

    一.FileOpenPicker/FileSavePicker介绍 这个在使用手机中是十分经常的,如在朋友圈中你要发图片,首先点击添加图片,而后你会进入手机图片区,选择图片后自动返回朋友圈准备发图界面 ...

  8. JSP中的EL

    1.为什么要使用EL 使用<jsp:getProperty>,只能访问bean属性的性质,不能访问嵌套性质.例如一个含有Dog对象的Person对象. 当然使用脚本可以工作,但是如果不想使 ...

  9. Spring学习笔记之方法注入

    public  abstract class ReplacedBean {protected static final Log log = LogFactory.getLog(ReplacedBean ...

  10. sql 给数据库表 字段 添加注释

    最近发现一些代码生成器 有针对注释做一个很好的转化,之前建表的时候 没有这块的注释.现在想增加,专门去看了下 如何增加注释 1 -- 表加注释 2 EXEC sys.sp_addextendedpro ...