`
234390216
  • 浏览: 10233217 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A5ee55b9-a463-3d09-9c78-0c0cf33198cd
Oracle基础
浏览量：462641
Ad26f909-6440-35a9-b4e9-9aea825bd38e
springMVC介绍
浏览量：1775538
Ce363057-ae4d-3ee1-bb46-e7b51a722a4b
Mybatis简介
浏览量：1398380
Bdeb91ad-cf8a-3fe9-942a-3710073b4000
Spring整合JMS
浏览量：395024
5cbbde67-7cd5-313c-95c2-4185389601e7
Ehcache简介
浏览量：679993
Cc1c0708-ccc2-3d20-ba47-d40e04440682
Cas简介
浏览量：530899
51592fc3-854c-34f4-9eff-cb82d993ab3a
Spring Securi...
浏览量：1183980
23e1c30e-ef8c-3702-aa3c-e83277ffca91
Spring基础知识
浏览量：467943
4af1c81c-eb9d-365f-b759-07685a32156e
Spring Aop介绍
浏览量：151403
2f926891-9e7a-3ce2-a074-3acb2aaf2584
JAXB简介
浏览量：68154
社区版块
存档分类
最新评论

jquery阻止事件冒泡

jquery event stop 事件冒泡 阻止 
阅读更多

在使用jquery进行事件处理的时候，当从里到外的多层都响应某一事件，然后又在里层发生该事件时，jquery默认是会从里到外依次响应各个事件的，然而有时候这并不是我们所需要的。这个时候就需要我们来阻止外层事件的发生，阻止冒泡。

jquery中可以用来阻止事件冒泡的主要有两种，stopPropagation()和return false

 

 

如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		#inner {
			height: 100px;
			background: #cfc;
		}
		#middler {
			background: #ccf;
		}
		#outer {
			background: #fcc;
		}
		div {
			border: 1px solid blue;
			padding: 20px;
			width: 200px;
		}
	</style>
	<script type="text/javascript" src="/tiantian/js/jquery-1.5.js"></script>
	<script type="text/javascript">
		$(function() {
			$("div").click(function(event) {
				alert($(this).attr("id"));//这样在点击inner的时候会从里到外依次响应其点击事件，依此弹出inner,middler,outer
				//return false;//这样则会阻止其默认行为，阻止事件不再冒泡，这样就只会弹出inner
				event.stopPropagation();//阻止事件冒泡
			});
		});
	</script>
  </head>
  
  <body>
    <div id="outer">
    	最外层
    	<div id="middler">
    		中间层
    		<div id="inner">最里层</div>
    	</div>
    </div>
  </body>
</html>
0
顶
0
踩
分享到：
| 使用javaMail收邮件 支持附件下载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    ### JS与jQuery阻止事件冒泡详解 #### 一、引言 在Web开发中，事件处理是不可或缺的一部分，其中事件冒泡机制尤为重要。事件冒泡是指事件从最深层的节点开始，逐级向上传播至最顶层的节点。在某些情况下，我们希望...

    事件冒泡是什么如何用jquery阻止事件冒泡

    在jQuery中，可以通过几种方式来阻止事件冒泡。 - 使用返回false的方式：在事件处理函数中直接返回false，这将同时阻止事件冒泡和事件的默认行为。例如：`$(selector).click(function() { return false; });` - ...

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

    标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件（如点击），这个事件不仅会在该元素上进行处理，还会...

    利用JQuery阻止事件冒泡

    除了使用event对象的方法外，JQuery的事件处理函数还提供了一个简写形式来阻止冒泡，即直接在事件处理函数的末尾返回false。这等同于调用了event.stopPropagation()和event.preventDefault()。例如： ```javascript...

    JQuery 提供了两种方式来阻止事件冒泡.rar

    本资料主要探讨了JQuery阻止事件冒泡的两种方法。 首先，我们来看第一种方法——`event.stopPropagation()`。这个方法是jQuery中的一个事件处理函数，当在事件处理程序中调用它时，可以阻止事件继续在其DOM层次结构...

    Jquery阻止事件冒泡 event.stopPropagation

    标题中的"Jquery阻止事件冒泡 event.stopPropagation"就涉及到如何在jQuery中避免事件冒泡到DOM树的上级元素。`event.stopPropagation()`是jQuery提供的一个方法，用于阻止事件继续在DOM树中向上冒泡。当你调用这个...

    jQuery阻止事件冒泡实例分析

    jQuery是JavaScript库的一种，由John Resig在2006年发布，它通过...以上内容阐述了jQuery中阻止事件冒泡的原理和方法。通过阅读这些知识点，Web开发人员可以更有效地控制事件的执行流程，提高应用的性能和用户体验。

    jquery阻止冒泡实例

    jquery阻止冒泡的所有方法，适合初学jquery者，是一篇很好的学习文稿

    jQuery阻止事件冒泡具体实现

    在给定的示例中，`jQuery` 提供了 `event.stopPropagation()` 方法来阻止事件冒泡。在修改后的代码中，当用户点击`span`元素时，通过调用 `event.stopPropagation()`，可以确保点击事件不会继续传播到`div`和`body`...

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....

    jQuery中阻止冒泡事件的方法介绍

    一、冒泡事件简介 当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。比如：div下的a都有click事件，点击a的时候，会alert出现2次。这个现象叫做冒泡事件。 这个事件从原始元素开始...

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    综上所述，jQuery事件处理机制中的绑定和解绑、事件冒泡与阻止事件冒泡是前端开发中非常重要的知识点。在实际开发过程中，灵活运用这些技术可以实现更加丰富的交互效果，并提升用户体验。通过上述实例的介绍和分析，...

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

    // 只阻止默认行为，不阻止冒泡 e.preventDefault(); }); ``` 3. 使用`event.stopPropagation()`：此方法用于阻止事件向上冒泡到父元素，但不会影响默认行为。例如： ```javascript $('#btn').click(function...

Magicbox
Global site tag (gtag.js) - Google Analytics