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

Question

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

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

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

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

如您所见：可点击的 div 嵌套在可拖动的 div 中。当我使用可单击的 div 作为绑定到它的句柄单击事件拖放可拖动的 div 时，它会被触发。那不是理想的行为。我希望仅在单击可单击但不将其拖动到任何地方时才触发单击事件。甚至可能吗？我想补充一点，我对使用 setTimeout （或类似）的解决方案不感兴趣。在这里，您有 jsfiddle链接（注意：添加了 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/

Answer 2

像这样使用可拖动方法的回调：

HTML：

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

查询：

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

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

JSFiddle：http: //jsfiddle.net/AJmTg/9/

祝你好运！