Js冒泡事件详解及阻止示例
如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播
Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。
如下例所示：
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
}
$(function() {
//方法一
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
/
如下例所示：
代码如下:
<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script>
function ialertdouble(e) {
alert('innerdouble');
stopBubble(e);
}
function ialertthree(e) {
alert('innerthree');
stopBubbleDouble(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
}
function stopBubbleDouble(e) {
var evt = e||window.event;
evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转
}
$(function() {
//方法一
//$('#jquerytest').click(function(event) {
// alert('innerfour');
// event.stopPropagation();
// event.preventDefault();
/
精彩图集
精彩文章