<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<style>
.pic{width:1000px;margin:50px auto;}
.pic li{list-style: none;float: left;width:200px;margin-right: 20px;}
.pic li img{width: 100%;}
.posi{display:none;width:500px;position: absolute;top:50px;left:318px;}
</style>
</head>
<body>
<div id="content" style="width:200px;height: 200px;background: #ccc;">
外層div
<span style="text-indent: 2em;display: block;background: red;">內層span元素</span>
外層div元素
</div>
<div id="msg" style="padding-bottom: 200px;"></div>
<script type="text/javascript">
$(function(){
//爲span元素綁定click事件
$('span').bind('click',function(event){
var txt =$('#msg').html()+'<p>內層span元素被點擊.</p>';
$('#msg').html(txt);
event.stopPropagation();
});
//爲div綁定click事件
$('#content').bind('click',function(event){
var txt=$('#msg').html()+'<p>外層div元素被點擊.</p>';
$('#msg').html(txt);
event.stopPropagation();
});
//爲body事件綁定click事件
$('body').bind('click',function(){
var txt =$('#msg').html()+'<p>body元素被點擊.</p>';
$('#msg').html(txt);
})
})
</script>
</body>
</html>
// 瀏覽器兼容性問題javascript
使用jQuery給一個事件加處理方法時，爲了阻止一個事件向上冒泡，使用了event.stopPropagation()，但在IE下卻報對象不支持此屬性或方法的錯誤（IE下是event. cancelBubble=true），jquery不是兼容各瀏覽器嗎？html
後來看了下jQuery的官方文檔後，原來在使用event的時候，必須在事件處理方法中加入參數event，不然這個event爲 window.event，而不是jQuery中的event。因此在jQuery定義事件處理方法時，最好加上參數event，以下：java