Дети внутри <a href> запускают мышку. Как это предотвратить? - PullRequest
Новая
       8

Дети внутри <a href> запускают мышку. Как это предотвратить?

2 голосов
/ 22 марта 2010

У меня есть это: 

<a href="javascript:void(0);">
   <div>
      <span>some content</span>
      <span>some content</span>
   </div>
</a>

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

Ответы [ 6 ]

4 голосов
/ 27 января 2011

Для всех, кто встречает этот пост в качестве архива, вот что сработало для меня.

Вместо использования mouseout () попробуйте использовать mouseleave () для тега.

Моя проблемабыл результатом элементов внутри div, вызывающих несколько вызовов mouseout.Mouseleave на родительском объекте решил эту проблему.

3 голосов
/ 22 марта 2010

Если вы используете jQuery, вам следует переключиться на метод hover.

В противном случае, проверьте e.target || e.srcElement.

0 голосов
/ 23 марта 2010

взломал мой путь к решению. position: относительно якоря и фиктивного элемента внутри, который расширяется на ширину и высоту на 100%, абсолютно точно для наложения якоря. Больше не мерцает ссылка при наведении курсора и не должно быть никаких пустых событий, связанных с мышью. Вот код и вот ссылка : 

<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
position:relative;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
.dummy {
z-index:1;
position:absolute;
left:-1px; top:-1px; /* Fix for parent's border, isn't required for no border */
border:1px solid;
border-color:inherit;
background:transparent;
width:100%;
height:100%;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div class="dummy"></div><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>
0 голосов
/ 23 марта 2010

Вот часть кода, который воспроизводит проблему, либо вы можете скопировать и вставить это, чтобы протестировать его, либо увидеть здесь то же самое, что я загрузил для тестирования : 

<html><head><style>
a {
float:left;
border:1px solid #b0b;
display:block;
}
.shpf,.shpe {
background:#b0b; float:left;
width:2px; height:2px;
padding:0; margin:0;
line-height:0;
}
.shpe {
background:#fff;
}
.shpbrk {
float:left; clear:both;
}
</style></head><body>
<a id="happy" href="javascript:void(0);"><div id="happy_button" class="button"><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpf"></span><span class="shpe"></span><span class="shpe"></span><span class="shpbrk"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span><span class="shpe"></span></div></a>
</body></html>

Примечание: даже при использовании <! Doctype html>, который позволяет якорям быть блочными элементами, как сказал Райсбоул, результат тот же. При наведении курсора на якорь запускаются события отключения мыши, а также отображается строка состояния для мерцания текста ссылки назначения (по крайней мере, в Firefox, где-то еще не тестировался). Пролеты пустые, что обычно неправильно, но то же самое случается даже с & nbsp; внутри них.

0 голосов
/ 22 марта 2010

Ну, у вас есть вертикальный разрыв (я вижу перевод строки между двумя тегами <span>). Удалить его.

Стоит также отметить, что ваш HTML далеко не действителен. Встроенные элементы, такие как <a>, не могут содержать блочные элементы, такие как <div>.

0 голосов
/ 22 марта 2010

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

...