Говорячи про DIV-елемент, всередині є елемент IMG і SPAN, не переймайся тим, як ці два внутрішнього елемента розташовані, це не те, про що я хочу говорити.
Щоб досягти спецефектів, мені потрібно використовувати події onmouseover і onmouseout у TD, і коли я їх перевірю, знайду таку ситуацію:
Коли миша рухається всередині DIV, активується подія onmouseover; Потім перемістіть мишу на елемент IMG або SPAN всередині DIV, ми точно не вважаємо, що миша перемістилася назовні DIV, але дивно, що подія onmouseout активується, і подія onmouseover також активується одразу.
Це не те, чого я хочу, тож як я можу «заблокувати» втручання подій Javascrip{filtering}t, які викликають внутрішні елементи зовнішнім?
Ось два методи:
1. встановити тайм-аут
Оскільки після того, як миша рухається над внутрішнім елементом і запускає подію onmouseout зовнішнього елемента, onmouseover зовнішнього елемента також активується одразу, тому нам потрібно лише затримати дію, яку потрібно виконати подія onmouseout зовнішнього елемента, на короткий час для виконання, а потім виконати метод clearTimeout у події onmouseover, щоб уникнути перешкод події, спричиненої внутрішнім елементом.
Будь ласка, дивіться наступну ілюстрацію для конкретного процесу виконання (вертикальна пунктирна лінія позначає час):
Це розумний підхід, бо коли активується onmouseout, основний метод не виконується одразу, а чекає короткий час. Якщо подія onmouseover активується одразу в цей час, то фактично гарантовано, що подія onmouseout спрацьовує через втручання внутрішніх елементів, тому використовуйте clearTimeout у події onmouseover, щоб запобігти виконанню затриманого методу.
2. містить
Зробіть наступне рішення при націленні на мишку, а потім виконуйте тіло методу, коли результат істинний:
Зробіть наступне рішення при виході миші, а потім виконайте тіло методу, коли результат істинний:
Ось пояснення значення цих двох рядків коду:
У IE всі HTML-елементи мають метод contain, який визначає, чи містить поточний елемент заданий елемент. Ми використовуємо цей метод для визначення, чи запускається подія зовнішнього елемента внутрішньою подією, і якщо всередині елемент викликає небажану подію, то цю подію ігноруємо.
event.fromElement вказує на елемент, з якого миша залишає події, коли активуються події onmouseover і onmouseout; event.toElement вказує на елемент, у який миша входить під час активації подій onmouseover і onmouseout.
Отже, значення двох наведених вище рядків коду таке:
- Коли активується подія onmouseover, вона визначає, чи є елемент, залишений мишею, внутрішнім елементом поточного елемента, і якщо так, ігнорує цю подію;
- Коли активується подія onmouseout, оцінюйте, чи є елемент, введений мишею, внутрішнім елементом поточного елемента, і якщо так, ігноруйте цю подію;
Таким чином, внутрішній елемент не заважає подіям onmouseover і onmouseout зовнішнього елемента.
Але проблема знову в тому, що браузери, які не підтримують IE, не підтримують функцію contain, але тепер, коли ми знаємо функцію contain, можемо додати наступний код, щоб додати підтримку contain, не IE-браузерів:
Вищезазначені методи не сумісні з Firefox:
Суть у тому, що jQuery:
jЗапитВикористовуйте mouseleave замість mouseout, щоб те, що сказано вище, не сталося.
Також перемикання миші буде активуватися неодноразово, просто використовуйте MouseEnter.
Ідеальне рішення~
|
Опубліковано 17.12.2018 14:57:53
|
|
|
|
