Question

我想在点击div时添加“selected”类。问题是，如果我点击具有父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;
});

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

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

});

在mousedown上添加类到对象

3 个答案: