<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      #box {
        width: 300px;
        height: 300px;
        background: red;
        display: none;
      }
    </style>
    <script type="text/javascript">
      window.onload = function() {
          var btn = document.getElementById('btn');
          var box = document.getElementById('box');
          btn.onclick = function(ev) {
            var oEvent = ev || event;
            box.style.display = 'block';
            //oEvent.cancelBubble = true;//高版本浏览器
            stopBubble(oEvent);
            //在低版本的chrome和firefox浏览器中需要兼容性处理
            //高版本chrome和firefox浏览器直接使用上面这行代码即可
          }
          document.onclick = function() {
            box.style.display = 'none';
          }
  
        }
        //阻止冒泡事件的兼容性处理
      function stopBubble(e) {
        if(e && e.stopPropagation) { //非IE
          e.stopPropagation();
        } else { //IE
          window.event.cancelBubble = true;
        }
      }
    </script>
  </head>
  
  <body>
    <input type="button" id="btn" value="语言" />
    <div id="box"></div>
  </body>
  
</html>

jquery DefaultPrevented转载

   

阻止默认事件行为的触发。

例如,在执行这个方法后,如果点击一个锚点,就不会让浏览器跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)调用过了。


<!DOCTYPE html>

<html>
  <head>
   
<script
src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>
  <body>
     
<a
href="http://www.3qhouse.com">default click action
is prevented</a>
     
<div
id="log"></div>
      
<script>
           
$("a").click(function(event) {
              
event.preventDefault();
              
$('<div/>').append('default ' +
event.type + ' prevented').appendTo('#log');
            
});
      
</script>
   
</body>
  </html>

说明:对超级链接“<a>”,就有自身默认的跳转到新的URL行为,一旦给添加了js的点击事件,那么执行顺序是,首先执行click这个点击事件,然后才执行“<a>”的默认行为。

所以上面的示例中点击之后,首先执行了jquery的click事件,而在click事件处理方法中通过event.preventDefaule()阻止了默认的行为。

js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数的更多相关文章

  1. JavaScript阻止冒泡和取消事件默认行为

    //功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) { e.stopPropagation(); } ...

  2. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  3. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

  4. js阻止冒泡

    js阻止冒泡 (ev || event).cancelBubble = true; 标签切换 <script type="text/javascript"> windo ...

  5. 在FireFox浏览器上,用stopImmediatePropagation阻止冒泡鼠标滚动事件

    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...

  6. Redis:默认配置文件redis.conf详解

    转: Redis:默认配置文件redis.conf详解 # Redis配置文件样例 # Note on units: when memory size is needed, it is possibl ...

  7. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  8. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  9. js中event.preventDefault()和 event.stopPropagation( ) 方法详解

    event.preventDefault() 1.首先event.preventDefault()是通知浏览器不要执行与事件关联的默认动作,例如:  这里a标签的默认事件是跳转,这里我们告诉浏览器取消 ...

随机推荐

  1. 222. Count Complete Tree Nodes -- 求完全二叉树节点个数

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...

  2. BZOJ2223 [Coci 2009]PATULJCI

    求区间内个数大于rank的一个数 主席树求一下就好啦! /************************************************************** Problem: ...

  3. C语言----------链表的简单实现与操作

    链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成. 每个结点包括两个部 ...

  4. DateTime和字符串转换问题

    DateTime和string之间的相互转换经常碰到,可就这么简单的一个转换其中也有些需要注意的地方. static void Main(string[] args) { string format ...

  5. Webroot SecureAnywhere AntiVirus 2014 – 免费6个月

    Webroot SecureAnywhere 是由webroot推出的一款云安全软件,除了能够清除病毒外,特点是体积小.强力查杀木马.间谍软件.Rootkit 等等,为你的个人私隐信息提供全面的保护. ...

  6. linux centos 虚拟机新安装后没有网络

    ping的时候出现 name or service not known的时候 可以 修改/etc/sysconfig/network-scripts/ifcfg-ens33 文件 vi ifcfg-e ...

  7. 关于EPoll的个人理解

    1.epoll 是I/o多路复用的一种解决方案,对比select的优点有: a.支持打开最大的文件描述符(可高达百万) b.效率并不随着描述符的增多而线性下降.select每次是轮询,所以描述符越多效 ...

  8. IE、Chrome、Firefox 三大浏览器对比

    1. 代理 IE 浏览器设置代理位置在: [Internet 选项]⇒ [连接]选项卡 ⇒ [局域网设置],如下: Chrome 的代理配置界面完全同 IE,只是你设置路径在: [设置]⇒ [高级]⇒ ...

  9. Python数据类型-04.字典

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据 ------------ 完美的分割线 ------------- 1.字典引入 # 为何还要用字典?存放一个人的信 ...

  10. Spring IOC学习

    IoC基础 控制反转IoC(Inversion of Control),是一种设计思想,DI(依赖注入)是实现IoC的一种方法,也有人认为DI只是IoC的另一种说法.没有IoC的程序中我们使用面向对象 ...