Описание проблемы
Я надеюсь, что когда мышь перейдет в ID1, будет отображаться ID2, и когда мышь оставит ID1, будет отображаться ID2. Вопросы следующие:
1. Когда мышь перемещается от ID1 на ID2, ID изменяется с отображения, чтобы не отображать, а затем меняется на отображение
2. Когда мышь перемещается от ID2 к ID1, отображение ID2 становится бездействием, а затем становится дисплеем
Что я хочу, так это то, что когда мышь перемещается на ID1 или ID2, ID2 будет постоянно появляться без изменения.
<script type = "text/javascript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id1 "> <div id =" id2 "> </div> </div> <script type = "text/javascript"> $ ("#id1"). mouseover (function () {$ (this) .children (). Fadein (1000);}). Mouseout (function () {$ (this) .Children (). Fadeout (1000);}); </script>Проблемное решение
Первоначальный анализ проблемы заключался в том, что когда мышь перенесла от ID1 к ID2, мышь, оставленная от ID2 в ID1, и для ID1 было вызвано событие Mouseout, поэтому отображение ID2 стало бездействием. Затем мышь переехала в ID2, и на ID2 было вызвано событие Mouseover. Из-за пузырькового механизма, прежде чем Mouseover на ID2, пузырящейся до ID1, было вызвано событие MouseOver на ID1, а затем ID2 изменился от без дисков на отображение. Точно так же, когда мышь перемещается от ID2 к ID1, для ID2 запускается событие Mouseout. Или это из-за пузырькового механизма, что событие Mouseout передается на ID1, а ID2 изменяется от отображения на непрерывную игру. Затем, прежде чем мышь перейдет в ID1, запускается событие Mouseover, а затем ID2 не отображается для отображения.
Кажется, что вышеупомянутая проблема должна быть решена путем блокирования мыши из ID1, когда мышь перемещается от ID1 к ID2; Когда мышь перемещается от ID2 к ID1, блокируя мышь из ID2 от ID2 в ID1, предотвращая пузырьки мыши из ID2 от ID1. Тогда проблема не может быть решена, просто предотвращая пузырьки.
Чтобы решить такие проблемы, jQuery предоставляет методы мыши и мыши. Таким образом, код JS изменяется на следующее, что очень хорошо решило проблему.
$ ("#id1"). MouseEnter (function () {$ (this) .children (). Fadein (1000);}). MouseLeave (function () {$ (this) .children (). Fadeout (1000);});Многие места вводят мышиные, мышиные, мышиные и мышиные, поэтому я скопировал и вставил один.
/***********************************************
1. MOSEOVER и MOUSEENTER
Событие Mouseover запускается независимо от того, проходит ли указатель мыши через выбранную элемент или его дочерний элемент.
Событие MouseEnter будет вызвано только тогда, когда указатель мыши проходит через выбранное элемент.
2.mouseout и Mouseleave
Событие Mouseout будет вызвано независимо от того, оставляет ли указатель мыши выбранный элемент или любой дочерний элемент.
Событие MouseLeave будет запускается только тогда, когда указатель мыши покидает выбранную элемент.
/***********************************************
Это явление действительно это явление, но процесс немного расплывчат. Я понимаю следующее:
Когда указатель мыши перемещается к выбранному элементу, событие Mouseover будет запускается. Все знают, что когда указатель мыши перемещается от выбранного элемента к своему дочернему элементу, сначала будет запускается событие Mouseout выбранного элемента, а затем событие MouseOver детского элемента будет путем к выбранному элементу. В настоящее время он эквивалентен выбранному элементу, сначала выполняющему событие Mouseout, а затем выполнение события Mouseover.
Для проверки измените код на следующее
<script type = "text/javascript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id1 "> <div id =" id2 "> </div> </div> <script type = "text/javascript"> $ ("#id1"). mouseover (function () {// $ (this) .children (). fadein (1000); console.log ('a');}). Mouseout (function () {// $ (this) .Children (). Fadeout (1000);Переместите мышь со страницы на ID1, затем перейдите от ID1 на ID2, вывод консоли выглядит следующим образом
Можно видеть, что ID1 назвал события MouseOver, Mouseout и MouseOver, которые точно такие же, как и анализ выше.
Анализ реализации мыши и мыши и мышива
Принцип анализа
Из приведенного выше анализа мы видим, что для достижения эффекта мышиного и мышиного мыши, когда мышь перемещается из выбранного элемента к своему дочернему элементу, выбранное элемент не выполняет событие мыши, и при этом не выполняет событие MouseOver, которое пузырит подклассы. Когда мышь перемещается от выбранного элемента дочернего элемента к выбранному элементу, выбранное элемент не выполняет событие MouseOver, а также не выполняет событие Mouseout, которое пузырят подкласс.
Чтобы достичь вышеуказанного эффекта, нам нужен связанный атрибут объекта события, который используется для оценки атрибутов связанных узлов целевых узлов события MouseOver и Mouseout. Проще говоря, когда событие Mouseover запускается, атрибут связанного Target представляет узел, который мышь только что ушел, и когда событие Mouseout запускается, он представляет объект, к которому перемещается мышь. Поскольку MSIE не поддерживает это свойство, оно заменило свойства, а именно от элемента и элемента. Кроме того, нам также нужен метод содержимого, чтобы определить, содержится ли объект в другом объекте.
Таким образом, когда мышь движется, вам нужно судить следующие два
1. Вызовите Mouseover, вам нужно только определить, является ли связанный карьера детским элементом выбранного элемента. Если это так, то это не будет выполнено (при перемещении из выбранного элемента дочернего элемента к выбранному элементу MouseOver не будет выполнен; при переходе из выбранного элемента к выбранному элементу дочернего элемента Bubbled Mouseover не будет выполнен);
2. Позвоните Mouseout, вам нужно только определить, выбран ли дочерний элемент соответствующего уровня. Если это так, то это не будет выполнено (при перемещении из выбранного элемента дочернего элемента к выбранному элементу мышь -аут, пузырящий из дочернего элемента, не выполняется; при переходе из выбранного элемента к выбранному элементу дочернего элемента, MouseOver не выполняется);
Процесс реализации
Определите, существует ли взаимосвязь между двумя элементами
Функция содержит инкапсулируется в jQuery следующим образом
Это может быть упрощено следующим образом
// Судят, содержит ли два A A BFUNCHNCHNCTION (a, b) {return a.contains? A! = B && A.Contains (b): !! (A.comparedocumentposition (b) & 16);}Введение в сравнение
Этот метод является частью спецификации уровня DOM 3, позволяя вам определить взаимное положение между двумя узлами DOM. Этот метод более мощный, чем .Сontains (). Одним из возможных применений этого метода является сортировка узлов DOM в подробный и точный порядок. Информация, возвращаемая Nodea.comPareDocumentPosition (NODEB), описана следующим образом:
Значение бита
Через вышесказанное мы можем понять, почему мы должны написать это как A.ComparedocumentPosition (b) и 16, потому что, если узел A содержит узел B, будет возвращен 16, 16 и 16 = 1 будут возвращены, а результаты будут 0 в других случаях.
Получите связанный срок для совместимости
Чтобы быть совместимым с различными браузерами, обратитесь к исходному коду jQuery, напишите следующий код, чтобы получить связанные с атрибутами, связанные с целевыми узлами события MouseOver и Mouseout.
function getRelated (e) {var insiled; var type = e.type.tolowercase (); // Получить имя события здесь if (type == 'mouseover') {indiend = e.relatedTarget || e.FromElement} else else (type = 'mouseout') {связанный = e.relatedTarget || E.ToElement} return indiend; }Улучшить Mouseover и Mouseout
Улучшить Mouseover и Mouseout. Для достижения улучшенных эффектов мышиного и мышиного и мыши, все коды следующие.
<! Doctype html> <html> <head> <title> </title> </head> <body> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript" src = "https://code.jquery.com/jquery-1.14. type = "text/javaScript"> // Судья, содержит ли два A BFUNCMOND (a, b) {return a.contains? a! = b && a.contains (b): !! (a.comparedocumentposition (b) и 16);} функция GetReLetated (e) {var investion; var type = e.type.tolowercase (); // Получить имя события здесь if (type == 'mouseover') {insulity = relatedTarget || e.fromelement} и другой if (type = 'mouseout') {indiend = e.relatedTarget || e.toElement} return indiod; } $ (function () {$ ("#id1"). MouseOver (function (e) {// Защита, где мышь перемещается в ID1 var insield = getRelited (e); // Если связанного идентификатора дочернего элемента Id1, то есть, он перемещается от дочернего элемента идентификатора и ID1, или он связан с ID1, то это не так идентификатор. выполнено if (this! = связано &&! Содержит (это, связано)) {console.log ('mouseover');}}). Mouseout (function (e) {// Судья, где мышь должна перемещаться с id1? Элемент, операция не выполнена, в противном случае соответствующая операция выполняется, если (this! = связано &&! Содержит (это, связано)) {console.log ('mouseout');}});}); </script> </body> </html>Тест, маршрут движения мыши, как показано на следующей диаграмме
Как видно из консоли, MouseOver и Mouseout в этот момент полностью оснащены эффектами мыши и мыши.
Инкапсуляция кода
Если вам нужно загружать jQuery или писать много представителей каждый раз, когда вы выполняете такую операцию, это будет утомительная задача. Чтобы облегчить будущие операции, выполняется соответствующая упаковка, моделируемая jQuery и генерировать свой собственный мышь и мыши. Код инкапсулируется в файл dqmouse.js следующим образом:
(function (w) {var dqmouse = function (obj) {// Функция возвращается новым dqmouse.fn.init (obj);} dqmouse.fn = dqmouse.prototype = {// расширенный прототип объект obj: null, dqmouse: "1.0.0", init: function (obj) {this.obj = obj; это;}, содержит: function (a, b) {return a.contains? if (type == 'mouseover') {indiend = e.relatedTarget || e.fromelement} else if (type = 'mouseout') {indience = e.relatedtarget || e.toelement} return ulide; indust = _self.getRelated (e); ! _self.contains (obj, связанный)) {fn ();}} return _self;}} dqmouse.fn.init.prototype = dqmouse.fn; window.dqmouse = window. $$ = dqmouse;}) (window);Исходный файл называется следующим образом:
<div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript" src = "dqmouse.js"> </script> <script type = "text/javascript"> var id1 = document.getElementbyId ('id1'); $$ (id1) .over (function () {console.log ('mouseover');}). out (function () {console.log ('mouseout');}); </script>Выше приведено соответствующее содержание о том, как решить проблему мыши и мыши, запускающегося несколько раз в JS, которую редактор представил вам. Я надеюсь, что это будет полезно для всех!