用jquery阻止事件起泡

2024-05-09 12:18:25

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();
});

关于js事件起泡的验证

今天这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。

<script type="text/javascript">

$(document).ready(function(){

$('.one').click(function(e){

alert('one');

});

$('.two').click(function(e){

alert('two');

});

$('.three').click(function(e){

alert('three');

//阻止起泡取消下面的注释

// e.stopPropagation();

});

});

</script>

<div class="one" style="width:200px;height:200px;background:green;">

one

<div class="two" style="width:150px;height:150px;background:yellow;">

two

<div class="three">

three

</div>

</div>

</div>

转载于:https://www.cnblogs.com/windrainpy/archive/2011/08/09/2131651.html

用jquery阻止事件起泡相关推荐

jquery阻止事件冒泡的两种方法
事件的旅程: 当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件.以下面的页面模型为例: 1. <div class="foo">2. <span ...
jQuery阻止事件冒泡
jQuery 提供了两种方式来阻止事件冒泡. 方式一: event.stopPropagation(); $("#div1").mousedown(function(event) ...
JQuery 阻止事件冒泡---3种实现方式
第一种:return false: 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){do something ...retu ...
js jquery阻止事件冒泡
 <script>//id:数据唯一id img_url:图片地址 title:标题 num:页面对应的第几个列表function setHtml(id, ...
jquery 阻止事件冒泡
1. event.stopPropagation(); 阻止了事件冒泡,但不会阻止默认行为(它就执行了超链接的跳转) 2. return false; 阻止了事件冒泡,也阻止了默认行为(比如刚才它就没 ...
javascript, jQuery阻止默认事件和冒泡事件
事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> ...
jquery和javascript屏蔽右键菜单及阻止事件冒泡
jquery屏蔽右键菜单 $(document).ready(function(){$(document).bind("contextmenu",function(e){retur ...
JQUERY阻止点击事件冒泡
JQUERY阻止事件冒泡(点击子元素不触发父元素)的两种方法: function loadData() {var e=window.event || arguments.callee.caller.a ...
jQuery的事件绑定和解绑
1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...

最新文章

热门文章