<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //点击a标签，不进行页面跳转
        window.onload = function () {
            var obj = document.getElementById("myhref");
            obj.onclick = function (event) {
                //取消默认行为
                //return false;
                //分浏览器
                //IE下
                //01.第一道能力检测
                event = event || window.event;
                if (event.preventDefault) {

//非IE下
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }              
            };
        }
    </script>
</head>
<body>
  <a id="myhref" href="http://www.baidu.com">去百度</a>
</body>
</html>

这里的a标签的点击效果本来是要跳转到百度页面的，但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。

有时候会遇到 同一个标签上点击后有多个事件，如果只想执行第一个事件而放弃后面的事件，可以加上一段代码来阻止：

<span onclick="alert('后面的不会执行了!');event.stopPropagation();">click me!</span>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //点击a标签，不进行页面跳转
        window.onload = function () {
            var obj = document.getElementById("myhref");
            obj.onclick = function (event) {
                //取消默认行为
                //return false;
                //分浏览器
                //IE下
                //01.第一道能力检测
                event = event || window.event;
                if (event.preventDefault) {

//非IE下
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }              
            };
        }
    </script>
</head>
<body>
  <a id="myhref" href="http://www.baidu.com">去百度</a>
</body>
</html>

这里的a标签的点击效果本来是要跳转到百度页面的，但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。

有时候会遇到 同一个标签上点击后有多个事件，如果只想执行第一个事件而放弃后面的事件，可以加上一段代码来阻止：

<span onclick="alert('后面的不会执行了!');event.stopPropagation();">click me!</span>

jQuery中取消后续执行的内容的更多相关文章

  1. jQuery中取消后续执行内容

    <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title&g ...

  2. jquery中各个事件执行顺序如下：

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  3. jquery中取消和绑定hover事件的正确方式

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...

  4. jQuery中面向对象思想实现盒子内容切换

    这里主要是模拟小米官网中的首页的内容模块实现的主要动态效果 布局:采用了bootstrap框架进行布局,及其其中的字体图标 html: <!-- 内容 --> <div class= ...

  5. jQuery中处理事件冒泡的方法和取消后续内容的方法

    一:事件冒泡的意思是:一个大的容器已经设置了事件,如果这个容器里还包容着一个小的容器也设置了自己的事件,那么因为小容器是在大容器里面的,触发小容器的事件同时也等于触发了大容器的事件,有时这并不是我们想 ...

  6. jquery ajax中事件的执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  7. jquery ajax中各个事件执行顺序如下

    $(function(){ setTimeout(function(){ $.ajax({ url:'/php/selectStudent.php', }); },0); $(document).aj ...

  8. jQuery中样式和属性模块简单分析

    1.行内样式操作 目标:扩展框架实现行内样式的增删改查 1.1 创建 css 方法 目标:实现单个样式或者多个样式的操作 1.1.1 css方法 -获取样式 注意:使用 style 属性只能获取行内样 ...

  9. JS的内置对象以及JQuery中的部分内容

     [js中的数组]              1  数组的概念:可以再内存中连续存储的多个有序元素的结构                元素的顺序:称为下标,通过下标查找对应元素.           ...

随机推荐

  1. Ngrok让你的本地Web应用暴露在公网上

    1.Ngrok介绍 Ngrok是一个反向代理,通过在公共的端点和本地运行的Web服务器之间建立一个安全的通道.Ngrok可捕获和分析所有通道上的流量,便于后期分析和重放.简单来说,利用 Ngrok可以 ...

  2. Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现

    前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Scheme的使用(Android业务组件化之URL Scheme使用),今天重点来聊 ...

  3. 120项改进：开源超级爬虫Hawk 2.0 重磅发布！

    沙漠君在历时半年,修改无数bug,更新一票新功能后,在今天隆重推出最新改进的超级爬虫Hawk 2.0! 啥?你不知道Hawk干吗用的? 这是采集数据的挖掘机,网络猎杀的重狙!半年多以前,沙漠君写了一篇 ...

  4. Python爬虫小白入门（四）PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  5. JAVA构造时成员初始化的陷阱

    让我们先来看两个类:Base和Derived类.注意其中的whenAmISet成员变量,和方法preProcess(). 情景1:(子类无构造方法) class Base { Base() { pre ...

  6. Spring配置文件标签报错：The prefix "XXX" for element "XXX:XXX" is not bound. .

    例如:The prefix "context" for element "context:annotation-config" is not bound. 这种 ...

  7. gulp 自动添加版本号

    本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => " ...

  8. Express 教程 01 - 入门教程之经典的Hello World

    目录: 前言 一.Express?纳尼?! 二.开始前的准备工作 三.测试安装之经典的Hello World 四.使用express(1)来生成一个应用程序 五.说明 前言: 本篇文章是建立在Node ...

  9. 【MySql】查询数据库中所有表及列的信息

    SELECT TABLE_NAME, -- 表名 COLUMN_NAME, -- 字段名 DATA_TYPE, -- 字段类型 COLUMN_COMMENT -- 字段注释 FROM INFORMAT ...

  10. ASP.NET Aries JSAPI 文档说明：AR.DataGrid、AR.Dictionary

    AR.Global 文档 1:对象或属性: 名称 类型 说明 DG 对象 DataGrid操作对象 //datagrid集合,根据ID取出DataGrid对象,将Json当数组用. Items: ne ...