冒泡事件是单击子节点,事件将通过,最后触发父节点,祖先节点的单击事件。
HTML代码段:
复制代码代码如下所示:
外层的div元素
内跨度元
外层的div元素
jQuery代码如下所示:
复制代码代码如下所示:
$(
函数(){())
$('span)。Bind(单击
VaR txt =美元(' #味精)。Html()+内跨单元点;
$(#味精)。Html(TXT);
});
$(#内容)Bind(单击。
VaR txt =美元(' #味精)。Html()+外层的div元素被点击;
$(#味精)。Html(TXT);
});
$()Bind(单击
VaR txt =美元(' #味精)。Html()+体元点击;
$(#味精)。Html(TXT);
});
})
当单击跨时,将触发div和身体单击事件。单击div触发身体单击事件。
如何防止泡沫的发生修订如下:
复制代码代码如下所示:
$(函数(){())
$('span)。Bind(单击
VaR txt =美元(' #味精)。Html()+内跨度元点击;
$(#味精)。Html(TXT);
(事件。里面); / /停止事件
});
$(#内容)Bind(单击。
VaR txt =美元(' #味精)。Html()+外层的div元素被点击;
$(#味精)。Html(TXT);
(事件。里面); / /停止事件
});
$()Bind(单击
VaR txt =美元(' #味精)。Html()+体元点击;
$(#味精)。Html(TXT);
});
})
有时点击提交按钮有一些违约事件。例如,跳到其他的接口,但是如果你不通过它,你不应该跳。这个时候你可以
设置event.preventdefault();防止违约行为。
情况如下:
复制代码代码如下所示:
$(函数(){())
$(#子)Bind(单击。
用户名= $(var#
用户名)(。Val); / /获取的元素的值,val()
方法返回或设置所选元素的值。
如果(用户名){判断值为空
$(#味精)。Html(
文本框的值不能为空。); / /
消息 (事件。preventDefault); / /防止违约行为(提交)
}
})
})
HTML的一部分:
复制代码代码如下所示:
用户名 uff1a
另一种防止
默认行为的方法是返回false。同样的效果:
复制代码代码如下所示:
$(函数(){())
$(#子)Bind(单击。
用户名= $(var#用户名)瓦迩();
如果(用户名{)
$(#味精)。Html(文本框的值不能为空);
返回false;
}
})
})
同样,上述气泡事件也可以用返回false
处理。
复制代码代码如下所示:
$(函数(){())
$('span)。Bind(单击
VaR txt =美元(' #味精)。Html()+内跨单元点;
$(#味精)。Html(TXT);
返回false;
});
$(#内容)Bind(单击。
VaR txt =美元(' #味精)。Html()+外层的div元素是点;
$(#味精)。Html(TXT);
返回false;
});
$()Bind(单击
VaR txt =美元(' #味精)。Html()+体元点;
$(#味精)。Html(TXT);
});
})
jQuery对DOM的事件触发器具有冒泡特性,有时使用此特性可以减少代码重复,但有时我们不希望事件冒泡。