事件冒泡
.grandfather{
width: 300px;
height: 300px;
background-color: green;
position: relative;
}
.father{
width: 200px;
height: 200px;
background-color: gold;
}
.son{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 400px;
}
$(function(){
$('body').click(function() {
alert(4);
});
$('.grandfather').click(function() {
alert(3);
});
$('.father').click(function() {
alert(2);
});
$('.son').click(function(event) {//event代表当前事件
alert(1);
// console.log(event);//显示很多属性,其中clientX、clientY就是点击的坐标
// alert("X轴坐标:" + event.clientX);
// //阻止事件冒泡
// event.stopPropagation();
//合并阻止操作:把阻止冒泡和阻止默认行为合并
return false;
});
//阻止右键菜单
$(document).contextmenu(function(event){
// //阻止默认行为(原来右键能弹出菜单,阻止后无法弹出)
// event.preventDefault();
//合并阻止
return false;
})
})
............................................................................................................................................................
定时器弹框
.pop_con{
display: none;/*默认不显示,用定时器显示*/
}
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;/*使用固定定位*/
left: 50%;/*左上角位于页面中心*/
top: 50%;
margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度,使div位于页面中心*/
margin-top: -150px;
z-index: 9999;/*弹窗在最前面*/
}
/*遮罩样式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*设置透明度30%,兼容IE6、7、8*/
opacity: 0.3;
filter: alpha(opacity=30);
z-index: 9990;/*遮罩在弹窗后面*/
}
$(function(){
$('#btn').click(function() {
$('#pop').show();
return false;
});
$('#shutoff').click(function() {
$('#pop').hide();
});
//点弹框以外的地方,也能让弹框消失
$(document).click(function(){
// setTimeout(function(){
// $('#pop').hide();
// },2000);
$('#pop').hide();
});
$('.pop').click(function() {
return false;
});
//阻止默认行为(原来超链接可跳转到百度,阻止后无法跳转)
$('#link1').click(function() {
return false;
});
})
首页标题
页面内容
............................................................................................................................................................
事件委托
.list{
list-style: none;
}
.list li{
height: 30px;
background-color: green;
margin-bottom: 10px;
color: #fff;
}
$(function(){
/*
给每个li绑定事件,一共绑定了8次,性能不高
$('.list li').click(function() {
alert($(this).html());
});
*/
/*
事件委托:方法delegate,只绑定一次事件,冒泡触发
参数:
selector选择器:写入ul下面的所有要发生事件的元素,多个元素用空格隔开,例如‘li a span’
eventType事件
function要执行的操作
$('.list').delegate('li', 'click', function() {
//$(this)指发生事件的子集,即每个li
alert($(this).html());
//全部取消委托
$('.list').undelegate();
});
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8