События mouseEnter и mouseLeave
Вложений: 2
Приветствую всех! При реализации всплывающих попапов при наведении на ссылку столкнулся с проблемой бесконечной генерации событий mouseenter и mouseleave в том случае, когда всплывающий попап перекрывает область элемента, на который навешены события - происходит мерцание попапа при нахождении мышли в области, где перекрываются элементы управления.
Пожалуйста, подскажите, как можно решить (обойти) эту проблему. Ниже пример кода и несколько скриншотов.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Mouse enter | mouse leave test</title>
<style type="text/css">
a
{
display:block;
text-align:center;
width:200px;
height:50px;
top: 120px;
left: 182px;
position: absolute;
background: #F9A;
}
div
{
background: Yellow;
border: solid Orange 1px;
width: 159px;
height: 181px;
top: 26px;
left: 67px;
position: absolute;
display: none;
opacity: 0.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#aTest').mouseenter(function () {
$('#popup').show();
});
$('#aTest').mouseleave(function () {
$('#popup').hide();
});
});
</script>
</head>
<body>
<a id="aTest" href="#">Н А В Е Д И</a>
<div id="popup">
<strong>Заголовок</strong>
<p>Текст, текст, текст, текст, текст, текст</p>
<p>Текст, текст, текст</p>
</div>
</body>
</html>
|
Проблему решил использованием события mousemove
$(document).ready(function () {
$(document).mousemove(function (e) {
var coordinates = getCoordinates('#aTest');
if (pointInsideElement(e.pageX, e.pageY, coordinates.Left,
coordinates.Top, coordinates.Right, coordinates.Bottom)) {
$('#popup').show();
}
else {
$('#popup').hide();
}
});
});
var valueInRange = function (value, min, max) { return (value >= min) && (value <= max); }
var pointInsideElement = function (x, y, leftEl, topEl, rightEl, bottomEl) {
return valueInRange(x, leftEl, rightEl) && valueInRange(y, topEl, bottomEl);
}
var getCoordinates = function (selector) {
var element = $(selector);
var result = new Object();
result.Left = element.offset().left;
result.Top = element.offset().top;
result.Right = element.offset().left + element.width();
result.Bottom = element.offset().top + element.height();
return result;
}
Тему можно закрывать |
а что за такие mouseenter и mouseleave? в чем разница между mouseover и mouseout?
|
Отличаются тем, что mouseover и mouseout генерируют соответствующие события у дочерних элементов, а mouseenter и mouseleave - нет. http://api.jquery.com/mouseenter/
|
| Часовой пояс GMT +3, время: 17:59. |