标签：function box item bind js 阻止 冒泡 event
直接上代码
<!DOCTYPE html>
<html>
<head>
<title>js事件委托测试</title>
</head>
<body>
<div id='box'></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.item{
background-color: yellow;
margin: 10px;
padding: 10px;
color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var addItem = function(){
htmlStr = ''
for(var i=0; i<10; i++){
htmlStr += (`<div class="item">${i}</div>`)
}
$('#box').html(htmlStr)
}
addItem()
$('.item').bind('click', function(event){
alert('item')
event.stopPropagation()// 阻止冒泡
})
$('#box').bind('click', function(event){
alert('box')
})
})
</script>
</body>
</html>
jquery.bind()
查询官方api可看见回调方法传入值为event， 通过event就能阻止事件后续传播
js事件模型
参考
标签：function,box,item,bind,js,阻止,冒泡,event 来源： https://www.cnblogs.com/lurenjia1994/p/11122992.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。