好资源导航 » 文章资讯 » jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

2023-08-23 14:51:05 64

本文实例讲述了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用。分享给大家供大家参考，具体如下：

事件的绑定和解绑





Title


$(function(){
$('#div1').bind('mouseoverclick',function(event){//绑定事件:移动到div块上和点击
alert($(this).html);
$(this).unbind('mouseover');//取消鼠标移动到上面的事件
})
})


#div1{
background-color:#f6b544;
width:100px;
height:100px;
}

绑定事件:移动到div块上和点击

解绑事件：取消鼠标移动到上面的事件

事件冒泡-阻止事件冒泡





Title


$(function(){
$('.son').click(function(){
alert(1);
});
$('.father').bind('click',function(){
alert(2);
});
$('.grandfather').bind('click',function(){
alert(3);
});
})


.grandfather{
width:300px;
height:300px;
background-color:green;
}
.father{
width:200px;
height:200px;
background-color:gold;
}
.son{
width:100px;
height:100px;
background-color:red;
}

定义了三个div，在son点击一下弹出1，father点击一下弹出2，grandfather点击一下弹出3，如果我们点击son一下，那么会依次弹出123，点击father一下会依次弹出二三。

按照标签往上传到它的父级

事件冒泡有时候不需要，需要阻止，通过eventstopPropagation()来阻止

$('.son').click(function(event){//event就是一个事件对象
//用这个事件对象就能使用事件对象的方法
alert(1);
event.stopPropagation();//阻止事件对象冒泡
});

除了阻止事件冒泡，还要阻止一些默认行为，开发中直接returnfalse就行。

$('.father').bind('click',function(){
alert(2);
//阻止事件冒泡和阻止默认行为的同意写法
returnfalse;
});

弹框

点击弹框外面关闭弹框





Title


$(function(){
$('#btn').click(function(){
//alert(2);
$('.pop_con').fadeIn();
//alert(1);
returnfalse;//阻止事件，冒泡
});
$(document).click(function(){
$('.pop_con').fadeOut();
})
})



.pop{
position:fixed;
width:500px;
height:300px;
background-color:#fff;
border:3pxsolid#000;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;/*拉回去*/
z-index:2;
}
.mask{
position:fixed;
width:100%;
height:100%;
background-color:#000000;
opacity:0.3;
filter:alpha(opacity=30);/*兼容ie浏览器的*/
left:0;
top:0;
z-index:1;/*z-index设置现实层级*/
}
.pop_con{
display:none;/*因为pop_con包含住了mask和pop，所以设置了这个之后，他们就隐藏了*/
}





弹框里面的文字

如果不组织事件冒泡的话，点击之后，弹框出现之后，就会直接隐藏，只有阻止之后，才能点击外框的document或者mask才能隐藏弹框。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

热门推荐

随机推荐