Js発泡事件の詳細及び阻止例
3040 ワード
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();
//});
//
$('#jquerytest').click(function() {
alert('innerfour');
return false;
});
});
</script>
<div onclick="alert('without');">without
<div onclick="alert('middle');">middle
<div onclick="alert('inner');">inner</div>
<div onclick="ialertdouble(event)">innerdouble</div>
<p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p>
<p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p>
</div>
</div>
</html>
$('#id').click(function(event){
if(event.target==this){
//do something
}
})