Добавление нового элемента во время события `mousedown` предотвращает запуск события`click`?

Question

Я работаю с событиями jquery и добавляю новый элемент во время mousedown в позиции указателя мыши и после добавления элемента click Событие не вызвано.

Любое предложение заметно.

Заранее спасибо.

Мадху

Код:

<div style="border:1px solid">Click</div>
<span></span>
<div class="vis" style="display:none">Hello</div>
<script>
    var visualEle = $('div.vis');
    visualEle.css({border:"1px solid"});
    $('a').on("click", function (e) { e.preventDefault();});
    $('div').on("mousedown", mDown);
   $('div').on("mouseup",mUp);
    function mDown(e) {
        e.preventDefault();
        visualEle.css({ left: 100, top: 0, display: "block" });
        }

    function mUp(e) {

        e.preventDefault();
        $('span').append('mouse up triggerd<br/>');
        return false;
    }
    $('p').on("click",dClick);
    function dClick(e) {                
            $('span').append('double click triggerd<br/>');

    }
</script>

В приведенном выше коде click событие не срабатывает после mousedown выполнен.

Answer 1

В соответствии с этим документом

click событие отправляется элементу, когда указатель мыши находится над элементом, а кнопка мыши нажата и отпущена

в вашем случае точка мыши заканчивается, когда mousedown случиться, но после этого visualDiv перемещается под мышкой и освобождается на этом элементе.

возможное решение, которое я могу придумать благодаря @ArunPJohny, это использование $(this).trigger("click");

$('p').on("mousedown", function (e) {
    _x = e.pageX;
    _y = e.pageY;
    visualDiv.css({
        left: _x,
        top: _y
    });
    $(this).trigger("click");
});
$('p').on("click", function (e) {
    console.log(e.target)
});

Демо: http://jsfiddle.net/c5CRd/