2014-10-19 3 views
1

Для того, чтобы мой вопрос прост, вот пример: http://jsfiddle.net/542afcfg/1/Каково поведение привязки события клика на элементе группы SVG, еще запущенном на дочернем элементе и завершено другим?

document.getElementById('parent').addEventListener('click', function (e) { 
 
    alert('Clicked!'); 
 
});
<svg width="200" height="200"> 
 
    <g id="parent"> 
 
     <g id="child1"> 
 
      <circle r="20" cx="40" cy="80"></circle> 
 
     </g> 
 
     <g id="child2"> 
 
      <circle r="20" cx="40" cy="40"></circle> 
 
     </g> 
 
    </g> 
 
</svg>

Если вы начинаете, нажав на любой ребенка круг, и выпустить на другой, Chrome решает, что это имеет смысл запустите событие click, пока Firefox и Safari этого не делают.

С тех пор как дети сгруппированы по родительскому элементу g, он должен запустить событие click.

Кто-нибудь знает, что говорит спецификация?

ответ

2

Спец легко найти. You can read it here.

«Событие щелчка происходит при нажатии кнопки указывающего устройства щелкает над элементом. Щелчок определяется как MouseDown и MouseUp над тем же местом экрана.»

Подтвержденные и подал как ошибка в Chromium: https://code.google.com/p/chromium/issues/detail?id=424969

+0

Я не уверен, что ответ на мой вопрос. Это определение события click, по-видимому, допускает оба возможных случая в моем примере. –

+1

Я не согласен. То, как я это читал, означает, что мышь и мышь должны происходить в пределах небольшого допуска друг к другу (т. Е. Нескольких пикселей) и над одним и тем же элементом. Для меня Chrome имеет неправильное поведение. –

+0

Хорошо с HTML-элементами, поведение согласуется с тем, что вы упомянули в браузерах. Не уверен в пикселях, но Firefox и Safari, похоже, верят в то же самое. Семантически элемент 'g' должен группировать содержащиеся в нем элементы в один логический элемент, поэтому я не уверен. Я посмотрю, смогу ли я подтвердить это. –