Question

I have a div containing some content, in which there are some links. The div itself watches for the click event so it can make the content editable. However, I want the user to be able to click the links inside of the div and have it navigate to the linked page rather than edit the content (clicking anywhere else in the div should edit the content though). How do I achieve this?

Code example:

<div id="content">
    Here's a <a href="http://google.com">link</a>.
</div>

// jQuery Javascript:
$("#content").click(function() {
    // Make content editable
});

(Clicking on the link shouldn’t make the content editable, and instead should direct the page to google.com.)

Edit: I’m using my own code to make the content editable (switching out the div with a text area, that sort of thing).

Answer 1

Check the event target and return true

$("#content").click(function(e) {
    if ($(e.target).is('a')) {
        return true;
    }
});

Not tested

The thinking behind this is to bail-out early from the handler and, by returning true, allow the browser to handle the event the usual way.