Не удается скрыть всплывающее окно при нажатии на перетаскиваемый объект

Question

Итак, вот моя скрипка

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

Проблема в том, что я не могу скрыть желтое всплывающее окно, когда нажимаю на div2 (потому что оно перетаскивается).Если я смогу поймать событие, вызванное нажатием на div2, будет намного лучше.

Есть ли какое-нибудь решение?

Answer 1

Небольшая работа вокруг

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

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

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

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

Я просто прекращаю распространение на div2, когда вы нажимаете на текстовое поле. В противном случае он снова скрывает палитру.

Answer 2

Мне удалось сделать это с помощью события mouseDown

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

Скрипка здесь - http://jsfiddle.net/C4CcA/19/

Answer 3

добавить

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

в противном случае вы можете использовать delegate или on