Добавить класс в объект на mousedown

Question

Я хочу добавить класс «selected» при нажатии на div. Проблема в том, что если я нажимаю на div, у которого есть родительский div. родитель получает выбранный, а не дочерний div, который я хочу выбрать.

Я хочу, чтобы иметь возможность щелкнуть родительский div без выбора дочернего div и щелкнуть дочерний div без каких-либо родителей, которые выбирают div. Только 1 div должен иметь выбранный класс одновременно. Дивы также изменяются и перетаскиваются.

$("#wrapper").delegate('div:not(".ui-resizable-handle")', 'mousedown', function() { 
     $(".drag").removeClass('selected'); 
     $(this).addClass('selected'); 

    }); 

Демонстрация: http://jsfiddle.net/6wYRF/3/ ... Любые идеи?

Answer 1

Это происходит из-за распространения событий, предотвратить его возвращение false из обработчика события

$(".drag").draggable(); 
$(".drag").resizable(); 

$("#wrapper").delegate('div:not(".ui-resizable-handle")', 'mousedown', function() { 
    $(".drag").removeClass('selected'); 
    $(this).addClass('selected'); 
    return false; 
}); 

Демо: Fiddle

Answer 2

$(".drag").draggable(); 
$(".drag").resizable(); 

$("#wrapper").delegate('div:not(".ui-resizable-handle")', 'mousedown', function (e) { 
    $(".drag").removeClass('selected'); 
    if ($(e.target).is('.drag')) { 
     $(e.target).addClass('selected'); 
    } 
}); 

Demo --->http://jsfiddle.net/6wYRF/7/

Answer 3

Каждое событие передать объект как параметр для обратного вызова; этот объект имеет свойство target, которое является текущим элементом, на котором генерируется событие.

$("#wrapper").delegate('div:not(".ui-resizable-handle")', 'mousedown', function(evt) { 
    $(".drag").removeClass('selected'); 
    $(evt.target).addClass('selected'); 

});