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