javascript - 在鼠标按下时将类添加到对象

Question

我想在单击 div 时添加“选定”类。问题是，如果我单击具有父 div 的 div。父被选中，而不是我要选择的子 div。

我希望能够单击父 div 而不选择子 div 并单击子 div 而不选择该 div 的任何父级。一次只有 1 个 div 应该具有选定的类。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;
});

演示：小提琴

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');
    }
});

演示---> 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');

});