Question

For example I have this code:

<style>
    .wrapper { width:1200px; height:800px; }
    .column { width:900px; height:800px; margin:auto -0; }
</style>

<div class="wrapper">
     <div class="column"> </div>
</div>

I want a mousedown function to be called when you click outside of the “column” but not inside the column. Is this possible?

My current non-working code is:

$(".wrapper:not(.column)").mousedown(function(){
     alert("test");
});

UPDATE: I am actually using classes, not IDs.

Answer 1

The following will work by stopping mousedown events on elements with class column from bubbling, and will work so long as column elements are strictly contained within wrapper elements.

$(".wrapper").mousedown(function(evt) {
    alert("Mouse down!");
});

$(".column").mousedown(function(evt) {
    evt.stopPropagation();
});