Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/16: Рейтинг темы: голосов - 16, средняя оценка - 4.56
0 / 0 / 0
Регистрация: 02.08.2014
Сообщений: 5
1

События mouseover и mouseout по координатам курсора мыши

19.09.2014, 23:22. Просмотров 3000. Ответов 2
Метки нет (Все метки)

Всем привет! Создаю страницу в которой будет размещаться блок div #box
HTML5
1
<div id="box" class="jxgbox" style="width:700px; height:500px;"> </div>,
в этот div я помещаю доску для вычерчивания различных эскизов в интерактивной геометрической среде JSXGraph (от края до края):
Javascript
1
2
3
<script type="text/javascript">
     var board = JXG.JSXGraph.initBoard('box', {boundingbox: [0, 0, 7000, -5000], axis:true, grid:false});
</script>
На доске JSXGraph вычерчивается прямоугольник по заданным координатам точек. Прямоугольник может располагаться в любой части доски и быть любого размера (не больше размеров самой доски). При наведении на этот прямоугольник курсора мыши, должно срабатывать событие (у меня смена цвета фона страницы), при уходе мыши за пределы прямоугольника цвет фона страницы восстанавливается в исходный цвет.
Пытался сделать следующее:
В div #box помещаю еще один div #izd в том же месте и того же размера, что и прямоугольник который вычерчивается на доске JSXGraph, под доску (послойно).
HTML5
1
2
3
<div id="box" class="jxgbox" style="width:700px; height:500px;">
     <div id="izd"  ></div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(document).ready(function(){
     $('#box').mousemove(function(e){            
          //Блок отображения координат мыши относительно div '#box'
          var x1 = e.pageX - $(this).offset().left; // координаты относительно блока #box'
          var y1 = e.pageY - $(this).offset().top; // координаты относительно блока #box'
          $('#position').html("<strong> Позиция по оси X :</strong>" + x1 + " <br /> <strong> Позиция по оси Y :</strong>" + y1);
          //Конец блока отображения координат мыши относительно div '#box'
        
          $('#izd).mouseover(function(){                                                          
               $('body').addClass('body')
           });
 
          $('#izd).mouseout(function(){
               $('body').removeClass('body')
           });
     }); // Конец mousemove
}); //Конец ready
</script>
В этом случае внутреннего div #izd не видно и событие на перемещения мыши не срабатывает. Т.е доска закрывает его собой. А на доске все что нужно вычерчивается.
Если же div #izd поместить над доской (послойно), то он хорошо работает с перемещением мыши, все работает, событие срабатывает, но не подгружается доска JSXGraph, div #izd ей мешает.

В итоге, блок div #izd убираю вообще, т.к. он мне мешает и вставляю условия по координатам:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
$(document).ready(function(){
     $('#box').mousemove(function(e){
             var x1 = e.pageX - $(this).offset().left; // координаты относительно блока #box'
             var y1 = e.pageY - $(this).offset().top; // координаты относительно блока #box'
                                              
              $('#box').mouseover(function(){
                    if (x1>200 && x1<400){   //пока только по одной координате Х
                           $('body').addClass('body')
                    };
              });
 
             $('#box').mouseout(function(){
                   if (x1<200 || 400<x1){ //пока только по одной координате Х
                          $('body').removeClass('body')
                   };
             });
     }); // Конец mousemove
}); //Конец ready
</script>

И второй вариант еще вот так:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
if (x1>200 && x1<400){                                 
     $('#box').mouseover(function(){
          $('body').addClass('body')
     });
};
 
if (x1<200 || 400<x1){ //пока только по одной координате Х
     $('#box').mouseout(function(){
          $('body').removeClass('body')
     });
};
</script>
Итог один и тот же. При входе в блок div #box пока координата мыши не переходит границы 200 и 400 ничего не меняется, все как и должно быть. Как только мышь зашла в «зону», как будто в памяти отложилось. Но, ничего не меняется, событие не срабатывает, пока не выйдешь из div #box. При повторном вхождении в блок div #box, не важно с какой стороны, начинает работать событие, причем не реагируя на координаты мыши. Казалось бы условие IF должно работать, но уже не работает.

Есть подозрение что эти координаты или условие IF нужно бы прописать в выражении:
Javascript
1
2
3
<script>
$('#box'…координаты или условие….).mouseover(function(){
</script>
но как это сделать (синтаксис) я почему-то найти не могу.
Всю голову себе уже сломал. Кто-нибудь, помогите пожалуйста.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
19.09.2014, 23:22
Ответы с готовыми решениями:

Использование Mouseover/mouseout
Здравствуйте! Хотелось бы узнать, как правильно использовать mouseover/mouseout в JavaScript....

Установка задержки события при наведении курсора мыши
Есть данный скрипт, который плавно увеличивает картинку при наведении курсора мыши. Хотелось бы...

Событие mouseover, при наведении мыши на изображение изменять его ширину
Добрый день. Не пойму почему не работает код &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...

Как получить LPARAM по координатам курсора мыши?
привет всем. есть вопрос. есть макросы такие как GET_X_LPARAM( LPARAM lParam ) и GET_Y_LPARAM(...

2
Pure Free Digital Ghost
4209 / 1669 / 323
Регистрация: 06.01.2013
Сообщений: 4,287
20.09.2014, 00:04 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
     $('#box').mousemove(function(e){
             var x1 = e.pageX - $(this).offset().left; // координаты относительно блока #box'
             var y1 = e.pageY - $(this).offset().top; // координаты относительно блока #box'
                                              
             if (x1>200 && x1<400)   //пока только по одной координате Х
                $('body').addClass('body');
 
             if (x1<200 || 400<x1) //пока только по одной координате Х
                $('body').removeClass('body');
     }); // Конец mousemove
}); //Конец ready
1
0 / 0 / 0
Регистрация: 02.08.2014
Сообщений: 5
20.09.2014, 00:17  [ТС] 3
Вот чувствовал, что истина где-то рядом, но сам до этого никак. Спасибо большое.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.09.2014, 00:17

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как изменить цвет курсора ввода и курсора мыши в элементе Edit
Всем Здравия. Проблема в следующем, задал цвет фона и цвет текста в Edit, тут все нормально, но...

Chart как показывать координаты мыши по графику возле курсора мыши!
Chart как показывать координаты мыши по графику возле курсора мыши! Когда двигаешь мышкой по...

Вывод и удаление символа в координатах курсора мыши при нажатии на кнопки мыши
У меня есть вот такая задача: ПРи нажатии правой кнопки мыши обеспечить вывод на монитор по...

Когда кнопка мыши зажата, событие попадание курсора мыши в фокус контрола не работает
Есть несколько контролов на форме, на все есть событие возникающее когда мышь попадает на этот...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.