javascript - Mouseup取消所有Mousedown下的事件

Question

我正在尝试使用 Jquery 实现 div 调整代码大小。参见 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 没有绑定(bind)任何事件，只需执行以下操作: $('div.active').unbind()

供引用:unbind() api reference

此外，由于您正在处理添加到 DOM 的元素，因此使用 .click() 将不起作用，在处理动态元素时，我们引用 on() here .

但是，因为元素是动态的，所以您需要使用 on() 方法的“委托(delegate)”功能:

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

简而言之，委托(delegate)通过监听从子元素冒泡到它的非动态父元素的事件来工作。因此，由于动态子元素的事件会冒泡，父元素将始终收到来自其子元素的点击。