请在Chrome、Firefox等现代浏览器浏览本站。

javascript阻止事件冒泡和默认事件

javascript admin 1244℃
阻止事件冒泡:
比如在一个div中有一个p标签,当此div和p标签都具有相同的事件(如click)的时候,就会出现此问题。当点击p标签的时候,先执行p的点击事件,之后就会执行div的点击事件。因为点击p的时候,冒泡到了div。这时候就需要用到stopPropagation和cancelBubble阻止事件冒泡。
阻止默认事件:
我们知道,如果点击a标签,就会跳转链接。假如我们写的是<a href=”http://baidu.com”>,我们想先用js验证一些操作,如果没问题的话,允许用户点击跳转,否则提示用户验证未通过,禁止跳转。
jQuery 我的写法:
  1. $(‘a’).click(function(){
  2.     var isOK = false;
  3.     if (!isOK){
  4.         //未通过验证
  5.         alert(‘未通过验证,禁止跳转’);
  6.         return false;
  7.     }
  8. });

如果不加入return false,会导致继续执行页面跳转。

这里算是个特例,a标签的跳转只需要return false就行了,其他标签的默认事件没有这么简单。
(至于为什么关于链接直接使用return false就行,目前我查看网上资料也尚未得知。)
其他标签需要用到preventDefault。
最后给出这两个具体的演示例子:
  1. <!DOCTYPE html>
  2. <html>
  3.     <meta charset=”UTF-8″>
  4.     <!– 阻止冒泡 –>
  5.     <div id=”idDiv” style=”background: #ddd;padding:20px;”>
  6.         div标签
  7.         <p id=”idP”style=”background: #c00″>
  8.             p标签,在div内部
  9.         </p>
  10.     </div>
  11.     <p>
  12.         阻止冒泡说明:同时对div和p标签加入click事件,如果点击p标签不阻止冒泡,会激活div的点击事件
  13.     </p>
  14.     <hr>
  15.     <!– 阻止默认事件 –>
  16.     <input id=”idInput”/>
  17.     <p>
  18.         阻止默认事件说明:此输入框内,按下按键后会被阻止默认输入到输入框内,故无法输入任何内容
  19.     </p>
  20.     <script src=”http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js” ></script>
  21.     <script>
  22.         // 阻止冒泡
  23.         $(‘#idDiv’).click(function() {
  24.             alert(‘div click’);
  25.         });
  26.         $(‘#idP’).click(function(e) {
  27.             alert(‘p click’);
  28.             if (e && e.stopPropagation) {
  29.                 //非IE
  30.                 e.stopPropagation();
  31.             } else {
  32.                 //IE
  33.                 window.event.cancelBubble = true;
  34.             }
  35.         });
  36.     </script>
  37.     <script>
  38.         // 阻止默认事件
  39.         $(‘#idInput’).keydown(function(e) {
  40.             if (e && e.preventDefault) {
  41.                 //非IE
  42.                 e.preventDefault();
  43.             } else {
  44.                 //IE
  45.                 window.event.returnValue = false;
  46.             }
  47.             return false;
  48.         });
  49.     </script>
  50. </html>

转载请注明:许得龙博客 » javascript阻止事件冒泡和默认事件

喜欢 (0)or分享 (0)