jquery - 使 stopPropagation 在 html 按钮单击上工作

Question

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

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

任何人都可以看一下我的 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