jQuery当整个div可点击时，如何在div中创建链接

Question

I am using this code to make entire div clickable.

$(document).on('click', '.clickable', function (e) {
    window.location = $(this).find('a.main').attr("href");
    return false;
});

There are around 4 link in the div and i want them to work as it should, So if the div is clicked the link with class .main gets called/clicked., I want to make it so when other links are clicked within the div .. they work as a link should.

Answer 1

Use e.stopPropagation(); to prevent click for background clickables when you click on some DIV

$(document).on('click', 'div.clickable', function (e) {
    window.location.href = $(e.target).find('a.main').attr("href");
    e.stopPropagation();
    return false;
});

UPDATED: check jsFiddle

Answer 2

Simply don't return false, if the link itself was clicked:

$(document).on('click', '.clickable', function (e) {
    // only execute if no Link was clicked
    if (!$(e.currentTarget).is('a')) {
        window.location = $(this).find('a.main').attr("href");
        return false;
    }
});

This will execute your script only if the the DIV was clicked, not if the link was clicked. So the links inside your div will behave as usual.

Answer 3

$(document).on('click', '.clickable', function (e) {
    window.location = $(this).find('a.main').attr("href");
    return false;
});

$(document).on('click', '.clickable a', function (e) {
    e.stopPropagation();
});

Do not propagate events from the anchors.

Answer 4

http://jsfiddle.net/HerrSerker/3qen2/

$(document).on('click', '.clickable a', function (e) {
    e.stopPropagation();
});
$(document).on('click', '.clickable', function (e) {
    self.location = $(this).find('a.main').attr("href");
});