很多时候我们都想阻止一个a ?link的href跳转。

1
<a onclick=” return false ;” href=”www. 360 .cn”>click</a>

以上代码可以达到这个效果

有一点要注意

1
2
3
4
5
6
7
function stop(){
  
return false ;
  
}
  
<a onclick=”stop();” href=”www. 360 .cn”>click</a>

这么写是不会阻止默认事件的,stop()反回false, ?onclick却没有返回值 只有事件的返回值是false时 才会阻止默认事件 所以要这么写:

1
<a onclick=” return stop();” href=”www. 360 .cn”>click</a>

这样就会有效果, 那么如果是用绑定事件的方式呢 会怎么样呢

qwrap是用标准的事件绑定方式来做的 可以用它来测试

1
2
3
<a id=”testa” href=”www. 360 .cn”>click</a>
  
W(‘#testa’).click( function (){ return false ;}); // 这是一个标准的绑定事件方法

测试后发现 ie是可以阻止默认事件的 ?标准浏览器 chrome firefox等却没有能阻止 直接发生了跳转

分析后发现因为标准浏览器使用 addEventListener 绑定事件 而该方法是没有返回值的,可参见w3c文档 没有返回值, 返回值当然不会是false所以继续执行href 。

而ie使用attachEvent的方法这个方法是有returnValue的参见?http://msdn.microsoft.com/en-us/library/ie/aa703898(v=vs.85).aspx

所以成功阻止了默认事件,

那么使用addEventListener绑定事件 如何阻止呢 ?

虽然addEventListener 不能有返回值 但是它有一个方法 preventDefault() 专门用来阻止默认事件 ,

1
W(‘#testa’).click( function (e){ e.preventDefault();});

这样就可以成功阻止了.

所以 用addEventListener绑定的事件 必须用preventDefault()来阻止默认事件

但是又有一个现象

1
$(‘#testa’).click( function (){ return false ;});

query 却可以做到, 以上代码运行成功在所有浏览器

这是为什么 ?这并不是jquery可以例外 只是它悄悄的调用了preventDefault() 和 stopPropagation()

jqeury会把事件的响应函数封装在一个dispach的函数里 如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()

所以在jquery中 return false 等价于:

1
2
3
4
5
e.preventDefault()
  
e.stopPropagation()
  
return false ;

这三个

由href return false 来看阻止默认事件的更多相关文章

  1. JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题

    return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...

  2. JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

    (一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...

  3. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  4. JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  5. 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  6. js为链接绑定点击事件并且附带return false;来阻止跳转

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...

  7. js阻止默认事件,如a标签跳转和事件冒泡

    禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...

  8. (O)阻止默认事件和阻止冒泡的应用场景

    场景1:阻止默认事件   比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='ca ...

  9. jquery 阻止冒泡事件和阻止默认事件

    jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. ThinkPHP - 配置项目结构

    配置项目结构: 项目如果分为前后台使用. 那么最关键的就是,使用公共部分文件的划分,其中最为核心的就是公共配置文件的使用. 下面介绍的就是怎么将前后台项目的公共部分提起出来. 首先是其他公共的文件夹: ...

  2. 修改字符串 ToCharArray()

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 循环调用修正sic86

    create or replace procedure rebuild_sic86_wyl(pi_aac001 in number, po_fhz out varchar2, po_msg out v ...

  4. USACO Longest Prefix 【水】

    用Dp的思想解决了这道题目,也就是所谓的暴力= = 题意:给出一个集合,一个字符串,找出这个字符串的最长前缀,使得前缀可以划分为这个集合中的元素(集合中的元素可以不全部使用). 还不会Trie 树QA ...

  5. (Problem 10)Summation of primes

    The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17. Find the sum of all the primes below two milli ...

  6. iOS- 三步快速集成社交化分享工具ShareSDK

    http://www.cnblogs.com/qingche/p/3727559.html 1.前言 作为现在App里必不可少的用户分享需要,社交化分享显然是我们开发app里较为常用的. 最近因为公司 ...

  7. 【转】Visual Stdio VS 错误 error : 0xC00000FD: Stack overflow. 更改堆栈空间解决栈溢出问题

    原文见:http://www.cnblogs.com/xiangwengao/archive/2012/03/16/2399888.html 问题 给一个程序添加小功能,在debug下能正常运行,在r ...

  8. 带OpenSSL和MySQL的静态编译版本~

    http://www.npcglib.org/~stathis/blog/precompiled-qt4-qt5/ http://www.npcglib.org/~stathis/blog/preco ...

  9. Qt 获取字符串的UTF8编码值

    看到群里有人在问怎么获取字符串的UTF8编码值 自己测试了下 熟悉下函数 <span style="font-size:18px;">    ui->setupU ...

  10. mongoose 数据库操作 - 分页

    使用mongoose 加入分页方法,临时还没发现什么更好的方法,我使用的方法是,直接在源代码中加入 找到 node_modules/mongoose/lib/model.js打开这个文件.里面加入这段 ...