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

假设我得到的HTML代码如下所示：

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

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

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

$（“#可拖动”）.draggable（）；
$（“#可单击”）。单击（函数（）{
警报（'CLICK！'）；
});

如您所见：clickable div嵌套在Dragable div中。当我使用clickable div作为句柄拖放Dragable div时，将触发绑定到它的click事件。这是不可取的行为。我希望只有在单击clickable时才触发click事件，但不要将其拖到任何地方。有可能吗？我想补充一点，我对使用setTimeout（或类似）的解决方案不感兴趣。这里有JSFIDLE（注意：添加css是为了更好的可见性）

---

谢谢你的提示

使用可拖动方法的回调，如下所示：

HTML:

JSFiddle：

祝你好运

给你：

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

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

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

---

演示：

这不是我想要的。我根本不想触发click事件（当然，当拖动clickable时）。不过，谢谢：）如果您不想触发click事件，那么为什么要将其绑定到clickable div？以在单击时触发，而不是拖动；）嗯，我说过setTimeout对我来说不是一个好的解决方案；）不过谢谢你，这是必须的。如果不想使用本机解决方案，您可以随时要求UI团队实施本机解决方案。也许我需要用它。我觉得有更好的解决办法。再次感谢

var dragged = false;
$("#draggable").draggable({stop:function(ev,ui) { dragged = true;}});

$("#clickable").click(function() {
    if(!dragged)
        alert('CLICK!');
    dragged = false;
});

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

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

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