Wieder was gelernt. Falls Sie Probleme mit Event Bubbling haben, kann dies verhindert werden.
Am einfachsten ist es eine neue css-Klasse anzulegen und mit event.stopPropagation() zu arbeiten.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript" src="functions.js"></script> </head> <body> <table align="center"> <tr onClick='function1()'> <td onClick='function2()'> <div class="content">Click me ... (event bubbling)</div> </td> <td onClick='function2()' class="prevent-event-bubbling"> <div class="content">Click me... (no event bubbling)</div> </td> </tr> </table> </body> </html>
Javascript:
function function1(){
alert('tr event');
}
function function2(){
alert('td event');
}
$(document).ready(function() {
$(".prevent-event-bubbling").each(function() {
$(this).click(function(e) {
e.stopPropagation();
});
});
});
Hintergrund: jQuery API
Download Source Code.
It‘s quite in here! Why not leave a response?