Можно ли сделать mousedown функцию внутри элемента, но не элементы childen?

Question

Например, у меня есть этот код:

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

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

Я хочу, чтобы функция mousedown вызывалась, когда вы щелкаете за пределами "столбца", но не внутри столбца.Возможно ли это?

Мой текущий нерабочий код:

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

ОБНОВЛЕНИЕ: Я на самом деле использую классы, а не идентификаторы.

Answer 1

То, что вы хотите сделать, это добавить обработчик события mousedown к вашему #column div, но в этом обработчике событий вы хотите предотвратить пузырьковое событие до его элементов контейнера.

$("#column").mousedown(function (e) {
  var event = e || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
});

Вот полный пример: http://jsfiddle.net/YrXSM/

Answer 2

Я не думаю, что вы можете остановить вызов функции от детей, но вы можете определить, что было нажано.Я не уверен, если это лучший способ сделать это, но это должно работать:

$("#wrapper").mousedown(function(e){
  if($(e.target).attr('id') == 'wrapper')
  {
    //do stuff
  }
});

Answer 3

$(".wrapper").mousedown(function(e) {
    if (this !== e.target) { return; }
    alert("test"); 
});

Итак, в основном, мы проверяем, был ли нажат элемент .wrapper напрямую.Если нет, мы игнорируем событие, возвращаясь.

Answer 4

Пример, приведенный с использованием e.target, является наилучшим вариантом, однако в общем случае существует вероятность того, что ваша функция .mousedown () связана с более сложным селектором, в этом случае вы можете использовать следующий код.

$(".wrapper").mousedown(function(e){
    if ($('.wrapper').filter(e.target).size() > 0) {
         alert("test");
    }
});

Демонстрация по адресу: http://jsfiddle.net/9RPcb/1/

Answer 5

Следующее будет работать, останавливая mousedown события для элементов с классом column от всплытия, и будет работать до тех пор, пока элементы столбца строго содержатся в элементах-обертках.

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

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

Answer 6

Способ, которым я бы подошел к этому, - назначить другое событие для #container onMouseDown, которое ничего не делает, а затем предотвращает всплытие события.

Answer 7

$("#wrapper").mousedown(function(){
     alert("test");
});