Link in clickable table cell issue
I have a clickable cell with a link inside it, something like the 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 is when I click on the link both onclick events fire. How do I prevent this from happening?
EDIT:
A jQuery solution is acceptable if someone can give me an example of how to do that.
You need to stop propagation of the event.
EDIT: Since you asked about jQuery, you could delete the inline onclick attributes and assign the handlers like 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 and bubbling on the <a>
}
});
</script>
Note that this will assign click events to every <td> and their descendant <a> elements. You'll need to provide more specific markup for a more specific solution.
And don't forget to import the jQuery library before your code.
To do this in a cross-browser compatible manner, do this:
Example: http://jsfiddle.net/7u9Jg/1/
<a href="#test" onclick="doSomethingElse(event);">Here</a>
function doSomething() {
alert('something');
}
function doSomethingElse(e) {
// make sure the event doesn't bubble
if( e ) e.stopPropagation(); // W3C Compatible
else window.event.cancelBubble = true; // IE Compatible
alert('somethingElse');
}
The "inner" element should be set up such that the handler returns false:
Blah blah blah <a href="#" onclick="doSomethingElse(); return false;">Here</a>
That will prevent the default "bubbling" of the event up through the DOM. (It'll also prevent the default behavior for the <a> tag, which in this case is nothing anyway.)
You can also do this by calling the ".preventDefault()" method on the event object from within the handler, but you'd have to change more code to do that, and it doesn't seem worth it (here).
I do this a lot, seems like :-) Anyway, returning false does definitely prevent default action, but it doesn't cancel bubbling. To do that the handler can call ".stopPropagation()" (or in old IE browsers set the "cancelBubble" flag on the event object, or something like that). However to do that you have to register your event handlers differently (well you might not have to, but I don't recall the trick necessary to get at the event object with in-line handler code.)
I really hate answering questions by plugging frameworks, but event handling (and dealing with the vagaries of all the different browsers) is one of the things I happily delegate to a framework; almost anything you choose is going to make event handling easier and more reliable.
Isn't that what you want? By including your onclick event in the <td> as well, you're telling the browser to do exactly that.. can you consolidate the code you need into your <a> onclick?
加载中,请稍侯......
精彩评论