<!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. 
						
  2. js阻止冒泡及jquery阻止事件冒泡示例介绍
		
    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
    
		
    3. 
						
  3. JS点击子元素不触发父元素点击事件(js阻止冒泡)
		
    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8">  ...
    
		
    4. 
						
  4. js阻止冒泡
		
    js阻止冒泡 (ev || event).cancelBubble = true; 标签切换 <script type="text/javascript"> windo ...
    
		
    5. 
						
  5. 在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件
		
    楔子 是不是在火狐用stopPropagation不太满意 很久没有笑过又不知为何 既然不快乐又不喜欢这里 不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺 ...
    
		
    6. 
						
  6. Redis：默认配置文件redis.conf详解
		
    转: Redis:默认配置文件redis.conf详解 # Redis配置文件样例 # Note on units: when memory size is needed, it is possibl ...
    
		
    7. 
						
  7. jQuery：详解jQuery中的事件（二）
		
    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一)  ...
    
		
    8. 
						
  8. javascript event（事件对象）详解
		
    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
    
		
    9. 
						
  9. js中event.preventDefault()和 event.stopPropagation( )  方法详解
		
    event.preventDefault() 1.首先event.preventDefault()是通知浏览器不要执行与事件关联的默认动作,例如:  这里a标签的默认事件是跳转,这里我们告诉浏览器取消 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 本人遇到的spring事务之UnexpectedRollbackException异常解决笔记
			
    本人最近在使用spring事务管理的过程中遇到如下异常,导致服务端抛出500给前端,让搞前端的哥们抱怨我心里着实不爽,前前后后折腾了近半个小时才得于解决,今天就做个笔记,以免日后又犯这个错误.好了,错 ...
    
			
    2. 
						
  2. 解决Myeclipse闪退问题
			
    才安装好Myeclipse就出了问题,打开之后没过多久就自动退出了,看了好多解决方法都无效,后来才找到正确路径,转载过来方便跟我遇到同样问题的小伙伴,尽快解决 转载自:http://blog.csdn ...
    
			
    3. 
						
  3. 20181009-8 选题 Scrum立会报告+燃尽图 07
			
    Scrum立会报告+燃尽图(07)选题 此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2197 一.小组介绍 组长:刘莹莹 ...
    
			
    4. 
						
  4. 新转移注意(caffe):ImportError: libcudart.so.7.0: cannot open shared object file: No such file or directory
			
    https://github.com/NVIDIA/DIGITS/issues/8 For this error ImportError: libcudart.so.7.0: cannot open  ...
    
			
    5. 
						
  5. Linux的发行版之间的联系和区别
			
    转载:https://blog.csdn.net/suixin788/article/details/52555558 联系 Linux的内核源代码和Linux的应用程序都可以自由获得,因此很多公司组 ...
    
			
    6. 
						
  6. 使用 Win2D 绘制带图片纹理的圆（或椭圆）
			
    使用 Win2D 绘制图片和绘制椭圆都非常容易,可是如何使用 Win2D 绘制图片纹理的椭圆呢? 本文内容 重力迷宫小球 Win2D 实现 关于 CanvasCommandList 重力迷宫小球 ▲  ...
    
			
    7. 
						
  7. Struts2自定义标签4自定义分页标签
			
    第一步:webroot/web-inf下的str.tld文件 <?xml version="1.0" encoding="UTF-8"?> < ...
    
			
    8. 
						
  8. vue+webpack多个项目共用组件动态打包单个项目
			
    原文复制:https://www.jianshu.com/p/fa19a07b1496 修改了一些东西,因为sh脚本不能再window电脑执行,所以改成了node脚本.这是基于vue-cli2.0配置 ...
    
			
    9. 
						
  9. Spring Bean单例与线程安全
			
    一.Spring单例模式及线程安全 Spring框架中的Bean,或者说组件,获取实例的时候都是默认单例模式,这是在多线程开发的时候需要尤其注意的地方. 单例模式的意思是只有一个实例,例如在Sprin ...
    
			
    10. 
						
  10. oracle  归档日志总结
			
    Oracle 归档模式和非归档模式 归档模式和非归档模式 在DBA部署数据库之初,必须要做出的最重要决定之一就是选择归档模式(ARCHIVELOG)或者非 归档模式(NOARCHIVELOG )下运行 ...
    
			
    11.