Mouseover срабатывает несколько раз за один пролет элемента

Вот простой jsFiddle:Mouseover срабатывает несколько раз за один пролет элемента

http://jsfiddle.net/cEDj6/

У меня есть один span элемент, который я привязан к mouseover. Когда я перемещаю мышь горизонтально по разным строкам текста, наведение мыши происходит только один раз. Однако, когда я перемещаюсь между строками текста внутри одного и того же элемента span, наведение мыши происходит несколько раз.

Ожидается ли это?
Существует ли стандартный способ предотвращения этого (не считая добавления логики для рассмотрения последнего посещенного элемента)?

Использование Chromium, версия 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).

источник

2013-11-11 icyrock.com

, потому что это встроенный элемент, смотреть на него с фоновой HTTP: // jsfiddle.net/cEDj6/2/ измените на 'display: block' и введите dissapears – charlietfl

@charlietfl отличная точка. Я не знаю, почему я этого не говорил. Это должен быть принятый ответ, если вы публикуете его. Я думаю, что также стоит упомянуть (как вы можете видеть в моем ответе), что семантически правильный элемент для использования - это тег ', который по умолчанию является блоком. – m59

@charlietfl Спасибо - это имеет смысл. Забавно, что при добавлении границы проблема исчезает: http://jsfiddle.net/cEDj6/10/. Поэтому я предполагаю, что это не потому, что это встроенный элемент per se, но потому, что его упаковка делает перерывы, как вы показываете в jsFiddle. Можете ли вы разместить это как ответ, когда получите шанс? –

Это, кажется, происходит от встроенного elemnt <span> с несколькими строками текста. В действительности пространство между каждой строкой не содержится в элементе, касающемся мыши.

Это можно увидеть, положив цвет фона на элемент. Изменение его блокировать elemnt в CSS с display:block устраняет проблему, или с помощью других, чем пролет других родных блочных элементов

Background demo

источник

2013-11-11 03:02:59 charlietfl

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

источник

2013-11-11 02:20:27 Steve

Это странно использование в span. Так как семантический элемент является тегом <p>, используйте его. Это также исправит вашу проблему.

источник

2013-11-11 02:21:06 m59

Не совсем - у меня действительно есть законное использование пролета. В моем случае у меня был стиль CSS, применяемый к нескольким словам, чтобы применить к ним цвет фона. Они охватывали две линии как совпадение, поэтому я заметил это. Я просто добавил длинный блок текста, чтобы сделать его более заметным. –

@ icyrock.com ах! это имеет большой смысл! – m59

Другая вещь, которую следует помнить при рассмотрении использования P vs SPAN для этого, заключается в том, что P является блочным элементом. Если ваш текст обертывается в новую строку для одного слова, справа от этого слова остается пустое место под первой частью текста, на котором будет активироваться зависание, потому что оно все еще находится в элементе P. В этом случае пролет становится намного точнее. – Daved

Забавно, это потому, что пролет является встроенным элементом, и он обертывается. Поскольку span - это встроенный элемент, и он обертывается, вы получаете отдельные строки, и между линиями есть пробел. Я никогда не занимался этим раньше, но, поскольку у вас есть событие mouseout, это делает его более очевидным. Чтобы продемонстрировать это, ознакомьтесь с этим обновлением на своей скрипке.

Fiddle: http://jsfiddle.net/LSRvn/

The reason a DIV doesn't do this is because the DIV is a block element containing the items.

источник

2013-11-11 02:32:09 Daved

Mouseover срабатывает несколько раз за один пролет элемента

ответ

Смежные вопросы