jquery取消事件冒泡的三种方法(推荐)_jquery

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind(

  "submit", 

  function() { 

    return false;

   }

);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind(

  "submit", 

  function(event){
    event.preventDefault();
  }

);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind(

  "submit", 

  function(event){
    event.stopPropagation();
  }

);

(4)总结

1. 一个事件起泡对应触发的是上层的同一事件

特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件

(双击包含单击)。

2. 如果在click事件中,在你要处理的事件之前加上e.preventDefault();

那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。

3. e.stopPropagation()只要在click事件中,就不会触发上层click事件。

//如果提供了事件对象,则这是一个非IE浏览器

if ( e && e.stopPropagation )
  // 因此它支持W3C的stopPropagation()方法
  
e.stopPropagation();
else
  //否则,我们需要使用IE的方式来取消事件冒泡
  
window.event.cancelBubble = true;
return false;

以上这篇jquery取消事件冒泡的三种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery阻止事件冒泡、jquery 事件冒泡、jquery取消事件冒泡、jquery防止事件冒泡、jquery禁止事件冒泡,以便于您获取更多的相关知识。

时间: 2024-11-10 01:08:10

jquery取消事件冒泡的三种方法(推荐)_jquery的相关文章

jquery动态加载js三种方法实例_jquery

复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

jquery动态加载js三种方法

 <!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js");就ok了. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd&qu

jquery动态加载js三种方法实例

这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript("test.js");就OK了.   复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dt

jquery 动态加载js三种方法

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

ajax局部刷新实例 (三种方法推荐)

ajax局部刷新 <script> setInterval("refreshTime()",1000); //每格1秒刷新一次 funciton refreshTime() { var dateObj = new Date(); time.innerHTML = dateObj.toLocaleDateString(); //刷新div里面的内容 } </script> <div id=time> </div> function doRe

jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法_jquery

 首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <div id="box"> <p id="btn">我是按钮</p> </div> </body> style: .hid{ display:none; } script: $('#box').click(functi

jQuery页面加载初始化的3种方法(推荐)_jquery

jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种:   $(function(){ alert("第二种方法."); });  第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQu

jQuery的 $.ajax防止重复提交的两种方法(推荐)_jquery

下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'

Android开发之去掉标题栏的三种方法,推荐第三种

Android:去掉标题栏的三种方法和全屏的三种方法 第一种:一般入门的时候经常使用的一种方法 onCreate函数中加入以下代码: requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏 注意这句一定要写在setContentView()方法的前面,不然会报错的 第二种:在AndroidManifest.xml文件中定义 <application android:icon="@drawable/icon" android:la