jQuery 可点击元素嵌套在可拖动元素中

Question

假设我的 HTML 代码如下所示:

<script>
  $("#draggable").draggable();

  $("#clickable").click(function() {
    alert('CLICK!');
  });
</script>

<div id="draggable">
    <div id="clickable">        
    </div>
</div>

如您所见:可点击的div嵌套在可拖动的div中。当我使用可点击 div 拖放可拖动 div 时，会触发绑定(bind)到它的句柄单击事件。这不是理想的行为。我希望仅当您单击可单击但不将其拖动到任何地方时才触发单击事件。有可能吗？我想补充一点，我对使用 setTimeout (或类似)的解决方案不感兴趣。这里有 jsfiddle link (注意:添加 CSS 是为了更好的可见性)。

感谢您提供任何线索!

Answer 1

给你:

function handleClick() {
    alert('click!');
};

$("#draggable").draggable({
    start: function () {
        $('#clickable').off('click');
    },
    stop: function () {
        setTimeout(function(){
            $('#clickable').on('click', handleClick);
        },1);
    }
});

$("#clickable").on('click', handleClick);

演示:http://jsfiddle.net/HmK9z/