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

Question

Я создал страницу, которая использует jQuery, чтобы вы могли размещать <div> s на странице, основываясь на ваших координатах мыши при нажатии.

Страница

А вот и 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> не появится. Почему это?

EDIT:

Хорошо, проблема в том, что события mouse-up и mouse-down регистрируются в разных элементах, поэтому он не создает событие щелчка. Итак, как мне заставить мою часть щелчка мышью вверх игнорировать элементы div.tile (розовые прямоугольники) и зарегистрироваться в элементе div#canvas, чтобы создать событие нажатия?

Answer 1

Я считаю, что это не щелчок, если на одном и том же элементе не наведены мышка вверх и вниз.

Из документации jQuery:

Событие click отправляется элементу когда указатель мыши находится над элемент, и кнопка мыши нажал и отпустил. Любой элемент HTML может получить это событие.

Подробнее здесь

Answer 2

Вам нужно обработать mouseup вместо click.

EDIT : чтобы убедиться, что соответствующий mousedown произошел внутри #canvas, вы можете обработать его и проверить, вот так:

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 3

Ответ от DannyLane и SLaks очень полезен. Мне понадобилось вечно, чтобы найти причину моей ошибки. У меня есть модальное всплывающее окно (AjaxControlToolkit, ModalPopupExtender, со стилем Bootstrap) с кнопкой отмены. Тем не менее, похоже, что пользователю пришлось дважды щелкнуть, чтобы закрыть всплывающее окно. Глядя на источник, все события правильно подключены.

Оказывается, что, как описано в документации jQuery, мое событие нажатия мыши было на элементе кнопки отмены, но событие OnBlur в другом месте вызвало смещение макета (для отображения ошибки проверки), и оказалось, что мышь -up событие заканчивается на элементе, который он начал. Следовательно, событие click не срабатывает. См. Рисунок для графического объяснения.

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

Я связываю все мои «неосновные кнопки внутри моего модального», т.е. мои кнопки отмены ('.modal-content .modal-footer a: not (.btn-primary)'.

Когда запускается mousedown, я получаю ближайший родительский элемент, представляющий мой всплывающий элемент DIV (все они являются «.modal-content.modalPopup») для меня.

А потом я пытаюсь найти КОМПОНЕНТ Ajax, который представляет всплывающее окно. Это не 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();
    }
}

Answer 4

Клик состоит из события мыши и нажатия. Поскольку указатель мыши возник из другого div, вторичный div не будет регистрировать щелчок.