1 Востаннє редагувалося Олексій (27.07.2018 17:15:23)

Тема: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Подивіться, будьте ласкаві, код.  Я не дуже тямлю у дужках, тому міг наплутати.

 document.querySelectorAll(".btn").forEach(function (e) {
    e.addEventListener("click", function () {
      this.parentElement.classList.toggle("opened");
  });
      e.addEventListener("mouseover", function () {
          switch(e.keyCode){
        case 65:
          this.parentElement.classList.toggle("opened");
          }
  });
});

2

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Для дужок придумали вирівнювання - ставте початкову і завершальну дужку на одному рівні і не помилитеся. Це якщо у вас редактор зовсім простенький і не підсвічує, а так ще легше.
А от що ви робите у другому випадку - я не розумію. e у вас що - елемент .btn? А який у нього keyCode може бути?

3

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Тоді як правильно?

4

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

document.querySelectorAll('.btn').forEach(function(e) {
  e.addEventListener('click', function() {
    this.parentElement.classList.toggle('opened');
  });
  e.addEventListener('mouseover', function() {
    switch (e.keyCode) {
      case 65:
        this.parentElement.classList.toggle('opened');
    }
  });
});

не дякуйте

5 Востаннє редагувалося Олексій (27.07.2018 21:09:39)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Ти просто змінив пробіли? Воно так просто не стане працювати.
А, вибачай, не помітив лапки інші. Все-одно не працює)

6

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

У хромі є така чарівна клавіша f12, яка показує консоль. Що там пише, які саме помилки?

7 Востаннє редагувалося koala (27.07.2018 19:21:50)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Якось так:

document.querySelectorAll('.btn').forEach(function(e) {
  func = ()=>{this.parentElement.classList.toggle('opened');}
  e.addEventListener('click', func);
  e.addEventListener('mouseenter', func);//mouseover буде спрацьовувати завжди при русі, mouseenter - лише при наведенні
});

8 Востаннє редагувалося Олексій (27.07.2018 20:02:39)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

koala написав:

Якось так:

document.querySelectorAll('.btn').forEach(function(e) {
  func = ()=>{this.parentElement.classList.toggle('opened');}
  e.addEventListener('click', func);
  e.addEventListener('mouseenter', func);//mouseover буде спрацьовувати завжди при русі, mouseenter - лише при наведенні
});

Перестало відкриватися взагалі. А ще у вас немає A (65), у мене подвійна подія.

9

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Олексій написав:

Перестало відкриватися взагалі. А ще у вас немає A (65), у мене подвійна подія.

Правда? Що ж ви не сказали, що то за keyCode, коли я у вас питав?

10

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Неправильно вас зрозумів тоді.

11 Востаннє редагувалося Олексій (27.07.2018 21:00:37)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Здається, знайшов як це зробити!
Хоча ні, здалося.
Просто знайшов таке:

if (e.keyCode == 65)

12

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Ню-ню.

13

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

що ви хочете зробити?

14

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

що ви хочете зробити?

15

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

FakiNyan написав:

що ви хочете зробити?

Я хочу зробити, щоб для дії достатньо було навести курсор на кнопку та натиснути A.

16

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Невже це роблять так рідко, що ніхто не може одповісти

17

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Олексій написав:

Невже це роблять так рідко, що ніхто не може одповісти

А ви гадаєте, що за хвилину вам мають вже відповідати?

18 Востаннє редагувалося Олексій (28.07.2018 12:52:26)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

koala написав:
Олексій написав:

Невже це роблять так рідко, що ніхто не може одповісти

А ви гадаєте, що за хвилину вам мають вже відповідати?

Можуть і мають - дві різні речі. А про хвилину ніхто і не казав.

19 Востаннє редагувалося javascriptIsLife (28.07.2018 13:15:32)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<button class="btn">ЯваСценарій вбиває</button>
<body>
<script type="application/javascript">
document.getElementsByTagName("body")[0].addEventListener("keyup", function(e) {
    if (e.keyCode == 65) {
        document.querySelectorAll(".btn").forEach(function (e) {
            if (e === document.activeElement) {
                e.parentElement.classList.toggle("opened");
            }
        });
    }
});
document.querySelectorAll(".btn").forEach(function (e)
{
    e.addEventListener("click", function() {
        this.style.color = "red";
    });
});
</script>
</body>
</html>

20 Востаннє редагувалося FakiNyan (28.07.2018 14:04:16)

Re: наводення курсору і натиснення A чи клік ----> зміна класу об'єкта

Олексій написав:
FakiNyan написав:

що ви хочете зробити?

Я хочу зробити, щоб для дії достатньо було навести курсор на кнопку та натиснути A.

тоді вам треба івент onhover і той, котрий про кнопки
а нє, onmouseover