按下鼠标将类添加到对象中

Add class to object on mousedown

本文关键字:对象 添加 鼠标      更新时间:2023-09-26

我想添加类"selected"当点击一个div。问题是,如果我点击一个div,有一个父div.父被选中,而不是我想选择的子div。

我希望能够单击父div没有子div被选中,并单击子div没有该div的任何父母被选中。只有一个div应该同时拥有所选的类。div也可以调整大小和拖动。

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

Demo: http://jsfiddle.net/6wYRF/3/…什么好主意吗?

这是由于事件传播,通过从事件处理程序返回false来防止它

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

演示:小提琴

$(".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/

每个事件传递一个对象作为回调的参数;该对象有一个target属性,该属性是当前生成事件的元素。

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