В обработчике событий mousedown элемента div создается другой новый элемент div, который добавляется к телу.

Этот новый div имеетposition:fixed (так же может бытьposition:absolute) и имеет 100% ширину и 100% высоту. Поэтому он сразу же охватывает источник div, который вызвал событие нажатия мыши. Теперь с последней версией Google Chrome (v30), последним Firefox (v24), Opera v12.16 и даже с более старым Safari v5.1.1 (в Windows) после события mousedownнет Событие click запускается для прослушивателя событий, прикрепленного к телу.

Только Internet Explorer (как 9, так и 10)делает выстрелить событие щелчка на теле после этого! Зачем? И как это можно предотвратить? Это действительно ошибка в IE?

HTML:

Click me

CSS:

.clickme {
    background-color: #BBB;
}

.overlay {
    position: fixed; /* or absolute */
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
}

JavaScript:

$(document).on('click', function(event) {
    console.log('body click');
});

$('.clickme').on('mousedown', function(event) {
    console.log('div mousedown');

    var mask = $('');
    mask.attr('class', 'overlay');
    mask.appendTo('body');
});

Вот пример с некоторыми дополнительными комментариями:http://jsfiddle.net/Fh4sK/5/

После нажатияНажми на меня" только div

div mousedown

должно быть записано в консоли, но в Internet Explorer это на самом деле

div mousedown
body click

Я ценю любую помощь! Спасибо!

РЕДАКТИРОВАТЬ 1:

Я нашел несколько ресурсов, описывающих условия, когда нужно инициировать событие клика:

http://www.quirksmode.org/dom/events/click.html:»

click - срабатывает, когда события mousedown и mouseup происходят на одном элементе. "

http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order»

... в общем случае должны запускать события click и dblclick, когда целью событий связанных событий mousedown и mouseup является один и тот же элемент без событий mouseout или mouseleave, и должны запускать события click и dblclick на ближайшем общем предке, когда цель намечена связанных событий mousedown и mouseup различны.

м не уверен на 100% что заправильный" поведение сейчас на самом деле должно быть (может быть, IE является единственным браузером, который обрабатывает его правильно?). Из последнего предложения кажется, что правильно запускать событие click для тела, потому что тело - это "ближайший общий предок обоих элементов div. На упомянутой выше странице w3.org есть несколько других утверждений, которые описывают поведение, если элемент удаляется, но я сноваЯ не уверен, применимо ли это здесь, так как ни один элемент не удаляется, но покрывается другим элементом.

РЕДАКТИРОВАТЬ 2:

@Evan открыл сообщение об ошибке с просьбой Microsoft отказаться от описанного поведения:https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different

РЕДАКТИРОВАТЬ 3:

В дополнение к Internet Explorer, Google Chrome недавно начал вести себя так же:https://code.google.com/p/chromium/issues/detail?id=484655