在`mousedown`事件期间添加新元素会阻止触发`click`事件?

时间:2014-02-20 10:50:50

标签: javascript jquery events click mousedown

我正在使用jquery事件,我在mousedown时在鼠标指针的位置添加了一个新元素,并且在添加元素后,未触发绑定的click事件。

任何建议都值得赞赏。

提前致谢。

Madhu

代码:

<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事件。

1 个答案:

答案 0 :(得分:0)

根据this文件

  

当鼠标指针悬停在元素上并按下并释放鼠标按钮时,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/