Mouseup, чтобы отменить все события под Mousedown

Question

Я пытаюсь реализовать код изменения размера div, используя Jquery. См. here.

На данный момент он перемещается в соответствии с движением мыши. Коды здесь:

$('#top-left').mousedown(function(){ 
    event.stopPropagation(); 
    $(document).mousemove(function(event){ 
     var current_width=$(".active").width(); 
     var current_height=$(".active").height(); 
     var position = $(".active").position(); 

     var new_width=current_width+(position.left-event.pageX); 

     temp=$("#mouse").html(); 
     $("#mouse").html(temp+"<br />new_width= "+new_width); 

     $(".active").css({top:event.pageY+"px"}); 
     //$(".active").css({width:new_width+"px"}); 
    }); 
}); 
$('#top-left').mouseup(function(){ 
    event.stopPropagation(); 
}); 

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

Проверьте JSFiddle Here.

Answer 1

Если вы хотите div.active не иметь события, связанные с ним, просто сделать:. $ ('div.active') отвязать()

Для справки: unbind() api reference

Кроме того, поскольку вы имеете дело с добавлением элементов в DOM, использование .click() не будет работать при работе с динамическими элементами, us on() по ссылке here.

Однако, поскольку элементы являются динамическими, вы должны использовать «делегат» особенность по методе():

$("parentElement").on("click", "clickedElement", function() { 
    alert($(this).text()); 
    console.log(this); // will reference "clickedClicked", not "parentElement" 
}); 

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