Область попадания указателя мыши

@Марина29 · Регистрация: 02.02.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, скажите, пожалуйста, как вычислить координаты области, в которую должен попасть указатель мыши?

@Mr_Sergo · 04.02.2019, 09:59

Марина29,

Вычислить координаты можно так -> https://codepen.io/Mr_Sergo/pen/wNerye

HTML5
1
2
3
<p>Двигайте мышью над квадратом</p>
<div id="box"></div>
<div id="res"></div>

JavaScript
1
2
3
4
5
6
box.addEventListener('mousemove',e => {
    let hor = e.clientX, ver = e.clientY;
    res.innerHTML = 'Горизонт: ' + hor + '<br>' + 'Вертикаль: ' + ver;
 
    if(+hor > 50) res.innerHTML = 'Координаты по горизонтали больше 50px';
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body,html{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
 
#box{
    width: 100px;
    height: 100px;
    background: #333;
    position: relative;
    left: 0px;
    top: 0px;
}

@Марина29 · 04.02.2019, 10:28 **[ТС]**

Смотрите, у меня есть код, но почему-то при подании в верхнюю часть круга музыка не играет:

JavaScript
1
2
3
document.getElementById("map").addEventListener("click", e => {
  if( e.pageY > 150 && e.pageY < 400 && e.pageX > 150 && e.pageX < 400) document.getElementById("audio").play();
});

Подскажите, как это исправить.

@Mr_Sergo · 04.02.2019, 10:29

Марина29,

Поинтересней будет -> https://codepen.io/Mr_Sergo/pen/jdwaWQ

HTML5
1
2
3
<p>Двигайте мышью над квадратом</p>
<div id="box"></div>
<div id="res"></div>

JavaScript
1
2
3
4
5
6
7
8
box.addEventListener('mousemove',e => {
    let hor = e.clientX, ver = e.clientY;
    res.innerHTML = 'Горизонт: ' + hor + '<br>' + 'Вертикаль: ' + ver;
 
    let center = box.offsetLeft + (box.offsetWidth / 2);  // центр квадрата по горизонтали
 
    if(+hor > center) res.innerHTML = 'Зеленый квадрат';
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body,html{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
 
#box{
    width: 50px;
    height: 100px;
    background: #333;
    border-right: 50px solid #19a000;
    position: relative;
    left: 0px;
    top: 0px;
    margin: 0px auto;
}

@Марина29 · 04.02.2019, 10:40 **[ТС]**

У меня слева, справа и снизу работает, скажите, какую из координат поменять, чтобы заработало вверху?

@Mr_Sergo · 04.02.2019, 11:15

Сообщение от Марина29

Подскажите, как это исправить

Можно так -> https://codepen.io/Mr_Sergo/pen/VgWrMW

Добавлено через 33 секунды

HTML5
1
2
3
4
5
6
7
<p>Кликайте по черной области за смайлами</p>
<audio id='audio' src="https://www.w3schools.com/html/horse.ogg">
    Ваш браузер не поддерживает <code>audio</code> элемент. 
</audio>
<img id="map" src="https://businessviews.com.ua/files/news_tape/images/17/15/picture_pochemu-smajliki-v-r_1715_s1.png" alt="">
 
<div class="overlay"></div>

JavaScript
1
2
3
4
5
6
7
document.querySelector('#map').addEventListener("click", e => {
  if( e.pageY > 150 &&
    e.pageY < 400 &&
    e.pageX > 150 &&
    e.pageX < 400)
    document.querySelector('#audio').play();
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body,html{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
 
.overlay{
    width: 250px;
    height: 250px;
    background: #000;
    position: absolute;
    left: 150px;
    top: 150px;
    z-index: -1;
}

Добавлено через 3 минуты
Марина29,

JavaScript
1
2
3
4
5
6
7
document.querySelector('#map').addEventListener("click", e => {
  if( e.pageY > 150 &&  // если позиция курсора по горизонтали больше 150px И
    e.pageY < 400 &&    // позиция курсора по горизонтали меньше 400px И
    e.pageX > 150 &&    // позиция курсора по вертикали больше 150px И
    e.pageX < 400)      // позиция курсора по вертикали меньше 400px
    document.querySelector('#audio').play();  // то воспроизвести аудио
});

Добавлено через 1 минуту

Не по теме:

С координатами вам, как начинающему, думаю сложновато будет работать, по себе помню, в голове сплошная каша :)

Добавлено через 21 минуту
Марина29,

А вообще не проще ли через делигирование ? -> https://codepen.io/Mr_Sergo/pen/ErXoxm

Добавлено через 39 секунд

HTML5
1
2
3
4
5
6
<p>Кликайте по квадратам и вне их</p>
<audio id="audio" src="https://www.w3schools.com/html/horse.ogg">
    Ваш браузер не поддерживает <code>audio</code> элемент. 
</audio>
<div id="black"></div>
<div id="red"></div>

JavaScript
1
2
3
4
document.querySelector('html').addEventListener('click',e => {
    if(e.target.id == 'black') document.querySelector('#audio').play();
    if(e.target.id == 'red') alert('А это красный квадрат');  // ну или проигрывание другого звука
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body,html{
    width: 100%;
    margin: 0px;
    padding: 0px;
}
 
#black{
    width: 100px;
    height: 100px;
    background: black;
    position: relative;
    left: 30px;
    top: 150px;
}
 
#red{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    left: 280px;
    top: -90px;
}

Добавлено через 2 минуты
Попробуйте кликать по квадратам и вне их...
И без разницы в каком месте на экране они находятся

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Марина29 0 / 0 / 0 Регистрация: 02.02.2019 Сообщений: 10

	Область попадания указателя мыши 04.02.2019, 09:45. Показов 845. Ответов 5 Метки нет (Все метки) Здравствуйте, скажите, пожалуйста, как вычислить координаты области, в которую должен попасть указатель мыши? 0

@Марина29 0 / 0 / 0 Регистрация: 02.02.2019 Сообщений: 10
	04.02.2019, 10:40 [ТС]
	У меня слева, справа и снизу работает, скажите, какую из координат поменять, чтобы заработало вверху? 0