防止事件冒泡--jQuery事件处理
l防止事件冒泡
知识点：
引用
假设面临事件冒泡的问题，如何阻止意外结果的发生。
事件对象的target（目标）属性：控制事件传播，并停止事件冒泡。利用target属性，可以确定哪个DOM元素首先接收到事件，并确保该事件不会自动传播到其他元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery事件处理--防止事件冒泡</title>
<script type="text/javascript" src="rs/js/jquery.js"></script>
<script type="text/javascript">
$(
function()
{
<!-- $('div').click(-->
<!-- function()-->
<!-- {-->
<!-- alert('YOU HAVE CLICKED THE DIV ELEMENT!');-->
<!-- }-->
<!-- );-->
<!-- $('p').click(-->
<!-- function()-->
<!-- {-->
<!-- alert('YOU HAVE CLICKED THE PARAGRAPH ELEMENT!');-->
<!-- }-->
<!-- );-->
<!-- $('span').click(-->
<!-- function()-->
<!-- {-->
<!-- alert('YOU HAVE CLICKED THE SPAN ELEMENT!');-->
<!-- }-->
<!-- );-->
// 防止冒泡方式
$('div').click(
function(event)
{
var tg = $(event.target);
if(tg.is('div'))
alert('YOU HAVE CLICKED THE DIV ELEMENT!');
if(tg.is('p'))
alert('YOU HAVE CLICKED THE PARAGRAPH ELEMENT!');
if(tg.is('span'))
alert('YOU HAVE CLICKED THE SPAN ELEMENT!');
}
);
}
)
</script>
</head>
<body>
<h2>防止事件冒泡</h2><br />
<div>DIV ELEMENT
<p>PARAGRAPH ELEMENT
<span>SPAN ELEMENT</span>
</p>
</div>
</body>
</html> 相关推荐
wikiwater 2020-10-27
IdeaElements 2020-08-19
Sophiego 2020-08-16
Kakoola 2020-08-01
Kakoola 2020-07-29
ELEMENTS爱乐冬雨 2020-07-18
ELEMENTS爱乐小超 2020-07-04
ELEMENTS爱乐小超 2020-07-04
Kakoola 2020-06-28
Feastaw 2020-06-18
Wmeng0 2020-06-14
ELEMENTS爱乐冬雨 2020-06-14
云之高水之远 2020-06-14
哈喽elements 2020-06-14
Feastaw 2020-06-11