Говоря о 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 запускается сразу в это время, то практически наверняка происходит из-за помех внутренних элементов, поэтому используйте clearTimeout в событии onmouseover, чтобы предотвратить выполнение задержанного метода.
2. содержит
Сделайте следующее суждение при нахождении мыши, а затем выполните тело метода, когда результат верен:
При выходе мыши сделайте следующее суждение, а затем выполните тело метода, когда результат верен:
Вот объяснение значения двух вышеуказанных строк кода:
В IE все элементы HTML имеют метод contain, который определяет, содержит ли текущий элемент определённый элемент. Мы используем этот метод, чтобы определить, инициировано ли событие внешнего элемента внутренним элементом, и если внутренний элемент вызывает нежелательное событие, то игнорируем это событие.
event.fromElement указывает на элемент, из которого мышь выходит при активации событий onmouseover и onmouseout; event.toElement указывает на элемент, в который мышь входит при активации событий onmouseover и onmouseout.
Таким образом, значение двух приведённых выше строк кода таково:
- Когда срабатывает событие onmouseover, оно определяет, является ли элемент, оставленный мышью, внутренним элементом текущего элемента, и если да, игнорирует это событие;
- Когда активируется событие onmouseout, оцените, является ли элемент, введённый мышью, внутренним элементом текущего элемента, и если да, игнорируйте это событие;
Таким образом, внутренний элемент не мешает событиям onmouseover и onmouseout внешнего элемента.
Но проблема снова в том, что браузеры, не поддерживающие IE, не поддерживают функцию contain, но теперь, когда мы знаем функцию функции, мы можем добавить следующий код, чтобы добавить следующий код для поддержки contain для браузеров без IE:
Вышеуказанные методы несовместимы с Firefox:
Суть в том, что jQuery:
jQueryИспользуйте mouseleave вместо mouseout, чтобы то, что сказано выше, не произошло.
Также перегрузка мыши будет срабатывать многократно, просто используйте MouseEnter.
Идеальное решение~
|
Опубликовано 17.12.2018 14:57:53
|
|
|
|
