jQuery: Strange results using the 'not' selector?

StackOverflow https://stackoverflow.com/questions/21111355

Question

I have a page where when you click a tab with text, you are linked to a different page with an expanded description contained within a white block. On this page, I want the user to be able to return to the previous page by clicking anywhere in the background (not on the white block). Right now, clicking anywhere on the page with the expanded description links back to the main page (when it should be ignoring clicks on the white div containing the description). Here's my javascript:

$('html:not(.detailwhite)').mousedown(function(e) {
    document.location.href="index.html";
    e.stopPropagation();
});

And here's my html:

<!DOCTYPE html>
<html>
<head>
    <title>Group details</title>
    <!--library files-->
    <script src="lib/jquery_min.js"></script>
    <!--stylesheets-->
    <link rel="stylesheet" type="text/css" href="style/detailstyle.css">
    <!--javascript-->
    <script type="text/javascript" src="js/interactive.js"></script>
</head>

<body class="detailbg">

<div class="detailwhite">
    <h1 class="name">Group Name</h1>
    <img class="pic" src="style/testPic300x200.png" alt="Group picture"/>
    <p class="description">Here's the detailed description of the group.<p>
</div>

</body>
</html>

Summary: Clicking anything BUT the 'detailwhite' div should link the user back to index.html. Unfortunately, the 'but' is ignored.

Thanks for reading.

Was it helpful?

Solution

Your selector is adding the handler to a html element which does not have the class detailwhite, Instead you need

jQuery(function ($) {
    $(document).mousedown(function (e) {
        document.location.href = "index.html";
        e.stopPropagation();
    });
    $('.detailwhite').mousedown(function (e) {
        e.stopPropagation();
    });
})

Demo: Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top