JQuery 提供了两种方式来阻止事件冒泡。
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二：return false;
$("#div1").mousedown(function(event){
return false;
});
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
场景应用： Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。
示例测试代码： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").mousedown(function(event){
//event.stopPropagation();
return false;
});
$("#div2").mousedown(function(event){
alert("trigger mousedown event of rootDiv");
});
});
</script>
</head>
<body>
<div id="rootDiv" style="position:relative;left:400px;top:200px;">
<div>1.单击输入框，使输入框获取焦点：</div>
<input id="input1" style="width:250px;" type="text"></input>
<div id="div2">
<div id="div1" style="width:200px;height:200px;background-color:red;"><br><br>2.然后再单击这里</div>
</div>
</div>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/JeamKing/archive/2010/02/27/5332328.aspx
分享到：
相关推荐
除了这两种阻止事件冒泡的方法，JQuery还提供了`event.preventDefault()`，这个方法并不阻止事件冒泡，而是阻止了事件的默认行为。例如，点击链接默认会跳转到新的URL，但如果在事件处理程序中调用了`event....
JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....
jQuery提供了一种更简洁的方式来处理事件，其阻止事件冒泡同样有两种主要方式： ##### 1. 使用 `event.stopPropagation();` 这种方式仅阻止事件的进一步传播，而不影响当前事件的执行。 ```javascript $("#element...
JQuery提供了两种方法来阻止事件冒泡，分别是event.stopPropagation()和event.preventDefault()。 1. 使用event.stopPropagation() 当你在事件处理函数中调用event.stopPropagation()时，它会阻止事件继续传播到更...
标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件（如点击），这个事件不仅会在该元素上进行处理，还会...
在JavaScript和jQuery中，事件处理有两个关键概念：事件冒泡和事件委托。事件冒泡是指事件从最深的节点开始，然后逐级向上层元素传播事件。事件委托则是利用事件冒泡的特性，将事件处理器绑定到一个父元素上，以此来...
2. **`return false`**：这是一个简化的阻止冒泡的方式，同时也阻止了事件的默认行为（如链接的跳转）。但是，这种方法并不推荐，因为它可能会引起其他副作用，比如阻止了事件处理函数内部的正常流程。 3. **兼容性...
综上所述，jQuery中的事件冒泡和阻止默认行为是前端开发中经常遇到的两种情况。合理地使用`stopPropagation()`和`preventDefault()`这两个方法，可以帮助我们编写出更为丰富和动态的Web应用。掌握这些概念和技巧，...
总结来说，处理冒泡事件和模拟事件是前端开发中常见且重要的任务，掌握这些技能可以帮助我们更好地控制页面行为，提高用户体验。通过上述示例，我们可以看出使用jQuery实现这两项功能相对简单且直观，但如何恰当地...
在jQuery中，触发事件通常有两种方式：对于浏览器内置的事件，我们可以直接使用`.click()`等方法，如`$(...).click()`；而对于自定义事件，我们需要使用`.trigger()`方法。例如，定义了一个自定义事件`"chuaClick"`...
为了阻止事件冒泡，文档提到了两种方法： 1. 使用event.stopPropagation()方法： 这个方法是jQuery封装的方法，用于阻止事件冒泡。当事件处理器被触发时，调用这个方法可以阻止事件继续向上冒泡。在文档中，通过...
jQuery提供了多种方式来处理这种情况： 1. 使用`return false`：在事件处理函数中，`return false`可以同时阻止事件的默认行为和冒泡。这意味着点击`<a>`元素时，不会发生页面跳转，且事件不会向上冒泡。 ```...
jQuery中的事件绑定主要通过以下几种方式实现： 1. **`.on()`**：这是jQuery中最通用的事件绑定方法，可以用于绑定任何类型的事件。例如： ```javascript $('#myElement').on('click', function() { console.log...
下面将详细介绍如何实现这两种功能。 1. **阻止浏览器默认行为**： 当我们不希望浏览器执行其默认操作时，可以使用`event.preventDefault()`方法。这个方法适用于支持W3C标准的浏览器，例如Firefox、Chrome等。...
事件冒泡是JavaScript中的一种机制，当一个元素上的事件被触发后，该事件会沿着DOM树向上层元素传播，直到根节点。这种机制允许父元素捕获到在子元素上发生的事件。在某些情况下，事件冒泡可以非常有用，比如在给定...
阻止事件冒泡的方法主要有两种： 1. 使用原生JavaScript： - 对于现代浏览器，可以使用`event.stopPropagation()`方法阻止事件继续向上级元素传播。 - 对于旧版的Internet Explorer浏览器，需要使用`event....
总结来说，阻止事件冒泡和阻止默认行为是两种不同的操作，它们有时会被同时使用，有时只需要使用其中一种。在开发过程中，开发者应该根据实际需要选择合适的方法来处理事件，以确保程序按照预期工作。例如，当创建...
阻止事件冒泡有以下两种方式： 1. **返回false**：在事件回调函数的末尾加上`return false;`，这不仅可以阻止事件冒泡，还能取消事件的默认行为。 2. **使用stopPropagation()**：如果事件回调函数接收到了`event`...
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...