แต่ jquery จะกำหนดให้ลำดับการเกิดแบบ Event bubbling นั่นคือเริ่มจากด้านในก่อน
(โดยทั่วไปนะแต่อาจมีเทคนิคพิเศษที่ทำให้ลำดับการเกิด event เปลี่ยน)
http://www.quirksmode.org/js/events_order.html
http://api.jquery.com/bind/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#xxx').click(function(event){
alert('div event');
});
$('#xxx button').click(function(event){
alert('button event');
if (confirm('stop next event?'))
return false;
});
});
//]]>
</script>
</head>
<body>
<div id="xxx">
###<button>button in div</button>###
</div>
</body>
</html>
selector จะใช้สำหรับการเลือก element ครับ
แต่ถ้าจะจัดการกับ event ที่มี element ที่คาบเกี่ยวกัน (ซ้อนทับกัน)
แค่ selector ยังไม่พอครับ เพราะ event handler
ของตัวที่คลุมอยู่ก็กระทบกับตัวที่อยู่ข้างในมันด้วย จึงต้องใช้คำสั่ง stop propagation ควบคุมอีกทีหนึ่ง
การใช้คำสั่ง return false; ข้างบนี้จะเทียบได้กับ preventDefault(); และ stopPropagation(); พร้อมๆ กันครับ
stopPropagation()
preventDefault()
ไม่มีความคิดเห็น:
แสดงความคิดเห็น