在“ mousedown”事件期间添加新元素会阻止触发“ click”事件？

Question

I am working with jquery events and I am adding a new element at the time of mousedown at the position of the mouse pointer and after adding the element the binded click event is not triggered.

Any suggestion is appreciable.

Thanks in advance.

Madhu

Code:

<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>

In the above code the click event is not triggered after the mousedown is completed.

Answer 1

according to this document

The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released

in your case mouse point is over when mousedown happen but after that visualDiv moves under and mouse is released on this element.

possible solution I can think of thanks to @ArunPJohny is use $(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)
});

Demo: http://jsfiddle.net/c5CRd/