تگ فرزند از تگ پدر الگو نگیرد
سلام و خسته نباشید
به این کد من ی نگا بندازید
میبینید two# در داخل one# هستش.
حالا من میخوام کاری کنم که two# از پدرش الگو نبرد
یعنی وقتی روی #two کلیک کردی دستور عمل نکند.
امیدوارم منظورمو متوجه شده باشن
من میخوام که فرزند از پدر ارث نبرد.
روی پدر کلیک کردی دستورات عمل کند ولی روی فرزند کلیک کردی عمل نکند.
ممنون
کد HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>scrio=pt</title>
<style type="text/css">
#one{
width:300px;
height:200px;
background:#0CC;
margin:auto;
margin-top:100px;
padding-top:100px;
}
#two{
width:100px;
height:100px;
background:#6FF;
margin:auto;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#one:not(#two)').click(function(){
alert('d');
})
});
</script>
</head>
<body>
<div id="one">
<div id="two">
</div>
</div>
</body>
</html>
نقل قول: تگ فرزند از تگ پدر الگو نگیرد
با استفاده از متد stopPropagation از اون رویداد می تونید اینکار رو انجام بدید. در واقع وقتی این متد رو صدا می زنید باعث میشه که اون رویداد برای عناصر بالاتر اتفاق نیافته.
فرضا وقتی توی یک عنصر کلیک می کنید تمام رویداد های مربوط به کلیک به ترتیب برای اون عنصری که روش کلیک شده، والد اون عنصر، والد والد اون عنصر الی آخر اتفاق می افته اما با فراخوانی اون متد این اتفاق دیگه برای عناصر بالاتر اتفاق نمی افته:
$('#two').click(function (e) {
e.stopPropagation();
});
$('#one').click(function (e) {
alert('You clicked on #one not #two!');
});
