javascript - Link in clickable table cell issue -
i have clickable cell link inside it, following:
<html><body> <table><tr><td onclick="alert('cell click event fired.');"> blah blah blah <a href="#" onclick="alert('link click event fired.'); return false;">here</a> </td></tr></table> </body></html> the problem when click on link both onclick events fire. how prevent happening?
edit:
a jquery solution acceptable if can give me example of how that.
you need stop propagation of event.
edit: since asked jquery, delete inline onclick attributes , assign handlers this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('table td').click( dosomething ) .find('a').click( dosomethingelse ); function dosomething() { alert('something'); } function dosomethingelse(e) { alert('somethingelse'); return false; // prevent default behavior , bubbling on <a> } }); </script> note assign click events every <td> , descendant <a> elements. you'll need provide more specific markup more specific solution.
and don't forget import jquery library before code.
to in cross-browser compatible manner, this:
example: http://jsfiddle.net/7u9jg/1/
<a href="#test" onclick="dosomethingelse(event);">here</a> function dosomething() { alert('something'); } function dosomethingelse(e) { // make sure event doesn't bubble if( e ) e.stoppropagation(); // w3c compatible else window.event.cancelbubble = true; // ie compatible alert('somethingelse'); }
Comments
Post a Comment