单击可拖动对象时无法隐藏弹出窗口答案

【问题标题】：Can't hide popup when clicked on draggable object单击可拖动对象时无法隐藏弹出窗口
【发布时间】：2012-01-17 05:19:02
【问题描述】：

这是我的小提琴

http://jsfiddle.net/C4CcA/4/

问题是当我点击 div2 时我无法隐藏黄色弹出窗口（因为它是可拖动的）。如果我能捕捉到点击 div2 时触发的事件会更好。

有什么解决办法吗？

【问题讨论】：

stackoverflow.com/questions/1724743/…的可能重复

标签： javascript jquery html draggable

【解决方案1】：

添加这个

$("#div2").draggable().click(function(ev) {
    if (ev.target === this) {
        $(this).focus();
    }
});

否则你可以使用delegate或on

【讨论】：

这是做什么的，它是在单击 div2 时调用焦点事件，而不是在单击文本框时调用

【解决方案2】：

一个小小的解决办法

$(function(){
    $("#div2").draggable();

    $("#txtbox").click(function(event){
        event.stopPropagation();
        $("#colorpicker").show();
    });

    $("#txtbox").blur(function(){
        $("#colorpicker").hide();
    });

    $('#div2').click(function() {
       $("#colorpicker").hide();
    });
});

当您单击文本框时，我只是停止传播到 div2。否则它将再次隐藏颜色框。

【讨论】：

【解决方案3】：

我设法通过 mouseDown 事件来做到这一点

$("#div2").mousedown(function() {
    $("#colorpicker").hide();
    $("#txtbox").blur();
});

小提琴在这里 - http://jsfiddle.net/C4CcA/19/

【讨论】：