当按钮按住按钮从一个div移动到另一个div时，jQuery单击事件不起作用

Question

我创建了一个使用jQuery的页面，允许您在单击时根据鼠标坐标在页面上放置<div>。

The page

这是javascript：

$('document').ready(function() {
    $("#canvas").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $(document.createElement('div')).css({'left':x + 'px', 'top':y + 'px'}).addClass('tile').appendTo('#canvas');
    });
});

我发现，如果你在div#canvas和鼠标上用你的指针悬停在<div>上（或反之亦然），那么新的<div>就不会被放置。这是为什么？

修改

好的，问题是鼠标按下和鼠标按下事件在不同的元素中注册，因此它不会发生点击事件。那么如何让鼠标单击部分忽略div.tile元素（粉红色矩形）并在div#canvas元素中注册以创建点击事件？

Answer 1

您需要处理mouseup而不是click。

编辑：为确保在mousedown内发生相应的#canvas，yuo可以处理并检查，如下所示：

var mousedownInCanvas = false;

$(document).mouseup(function() { mousedownInCanvas = false });

$('#canvas').mousedown(function() {
    mousedownInCanvas = true;
}).mouseup(function(e) {
    if (!mousedownInCanvas) return;

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('<div class="tile"></div>').css({ left: x, top: y }).appendTo('#canvas');
});

Answer 2

我相信它不是点击，除非鼠标和鼠标按下发生在同一个元素上。

来自jQuery文档：

  

将click事件发送给元素   当鼠标指针结束时   元素，鼠标按钮是   按下并释放。任何HTML元素   可以收到这个活动。

更多信息here

Answer 3

点击包含鼠标按下和鼠标按下事件。由于您的鼠标按下来自另一个div，因此辅助div不会记录单击。

Answer 4

DannyLane和SLaks的答案非常有用。我花了很长时间才找到了我的bug的原因。我有一个带有取消按钮的模态弹出窗口（AjaxControlToolkit，ModalPopupExtender，带有Bootstrap样式）。但是，看起来用户必须单击两次才能关闭弹出窗口。查看来源，所有事件都正确连接。

事实证明，正如jQuery文档中所述，我的鼠标按下事件在取消按钮元素上，但是其他地方的OnBlur事件导致布局移位（显示验证错误），结果是鼠标-up事件最终会出现在与其开始的不同元素上。因此，点击事件不会被触发。请参阅图片以获得图解说明。

我的修复，因为我有太多的弹出窗口来逐一处理它们是使用mousedown事件。

我绑定了我的模态中的所有＆＃34;非主要按钮＆＃34;，即我的取消按钮（＆＃39; .modal-content .modal-footer a：not（.btn-primary）＆＃ 39;

当mousedown被解雇时，我会得到代表我的弹出式DIV元素的最近的父元素（它们都是＆＃39; .modal-content.modalPopup＆＃39;）。

然后我尝试找到代表弹出窗口的Ajax COMPONENT。这不是DIV，它就是它 ModalPopupExtender通常由它表示BehaviorId，但由于我没有那个BehaviorId，我使用我找到的唯一方法来循环遍历所有组件。

然后我可以调用Ajax Hide（）方法，与jQuery hide（）不同。

竞标：

Sys.Application.add_load(function () {
    var cancel = jQuery('.modal-content .modal-footer a:not(.btn-primary)');
    cancel.mousedown(function () {
        var popup = jQuery(this).closest('.modal-content.modalPopup')[0];
        if (popup) HidePopupByPopupDiv(popup.id);
    });
    //cancel.css('background-color', 'red'); //debug to see my cancel buttons hooked up
});

和隐藏方法：

function HidePopupByPopupDiv(popupPanelDivId) {
    var c = Sys.Application.getComponents();
    for (var i = 0; i < c.length; i++) {
        if (c[i].get_PopupControlID && c[i].get_PopupControlID() == popupPanelDivId)
            c[i].hide();
    }
}