制作stopProagation html工作按钮点击

Question

我有一个可拖动的div和一个html按钮。

我希望div在单击按钮时使用stopPropagation停止拖动，但由于某种原因，可拖动事件仍在工作。

任何人都可以看看我的jsfiddle，看看我错了

这里的的jsfiddle http://jsfiddle.net/Dp2z6/3/

和代码

#draggablediv { 
background-color:#ff0000; 
width:100px; 
height:100px; 
top:50px; 
left:50px; 
} 

#editBtn { 
font-size:12px; 
} 

$(function() { 
    $("#draggablediv").draggable(); 
}); 

$('#editBtn').click(function (event) { 
    event.stopPropagation(); 
    focusDiv(); 
}); 

function focusDiv() { 
    $('#draggablediv').focus(); 
} 

<div id="draggablediv">draggable Div 
<br> 
<input type="button" id="editBtn" value="click me"> 
</div> 

Answer 1

这听起来像你想要的东西是做当按钮被点击时停止可拖动的行为。 event.stopPropagation();只会阻止按钮上的事件冒泡到父div，但它不会影响直接单击draggablediv时发生的情况。

您需要使用disable或destroy可拖动窗口小部件方法来停止可拖动行为。您可以阅读关于可拖动小部件的API page之间的区别。

$('#editBtn').click(function (event) { 
    $("#draggablediv").draggable('destroy') 
    focusDiv(); 
}); 

Working Demo

Answer 2

你stopPropogation()被停止click事件的传播。

要删除可拖动性（完全用一个词），请使用.draggable('destory')。

$('#editBtn').click(function (event) { 
    event.stopPropagation(); 
    $('#draggablediv').draggable('destroy'); 
    focusDiv(); 
}); 

JsFiddle.

注：您还可以使用.draggable('disable')，但配备了一个奇怪的CSS的副作用，可能会或可能不理想。它确实向用户提供有用的反馈，即该元素事实上已被禁用。