製作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的副作用，可能會或可能不理想。它確實向用戶提供有用的反饋，即該元素事實上已被禁用。