JS / JQuery получение элемента мыши закончено

Question

Я использую JQuery, и я надеюсь, что элемент курсора нависает, однако мне нужно что-то вроде

, например:

<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>

1. Когда мышь входит в «externalBox», запускает событие «externalBox».
2. Когда мышь входит в «innerBox», запускает событие «innerBox».
3. Когда мышь возвращается в «externalBox», запускает событие «externalBox».

Однако единственные события, которые я могу найти, это

mouseover()

1. Когда мышь входит в «externalBox», запускает событие «externalBox».
2. Когда мышь входит в «innerBox», запускает событие «innerBox», за которым следует событие «externalBox».
3. Когда мышь возвращается в «externalBox», запускает событие «externalBox».

mouseenter()

1. Когда мышь входит в «externalBox» », Вызвать событие« externalBox ».
2. Когда мышь входит в« innerBox », запустить событие« innerBox ». * 103 5 *
3. Когда мышь возвращается в «externalBox», событие не запускается.

Answer 1

Я думаю, что вы пропустите небольшую заметку здесь. События по умолчанию во время распространения получили две фазы: захват и всплывание . Вы можете прочитать больше о них здесь .

Это примерно так:

Поэтому, когда вы щелкаете по элементу внутри другого элемента по умолчанию он будет всплывать через родительский элемент, затем будет вызвано родительское событие. Чтобы избежать такого, вы должны использовать .stopPropagation(), поэтому ваш код должен выглядеть примерно так:

document.getElementById("outerBox").addEventListener("mouseover", function () {
  console.log("Mouse is over outer box");
});

document
  .getElementById("innerBox")
  .addEventListener("mouseover", function (event) {
    event.stopPropagation();
    console.log("Mouse is over inner box");
  });

<div id="outerBox">OuterBox
  <div id="innerBox">InnerBox
  </div>
</div>

Answer 2

Использовать распространение событий. Когда мышь находится на innerBox, используйте событие mousemove для stopPropagation, и оно не будет пузыриться на externalBox.

См. Эту ссылку https://www.sitepoint.com/event-bubbling-javascript/

Answer 3

вы можете использовать .hover API, первая функция срабатывает при наведении курсора, а вторая при наведении курсора, вот пример:

$( "#outerBox" ).hover(
  function() {
    console.log("hola")
  }, function() {
    console.log("adios")
  }
);

$( "#innerBox" ).hover(
  function() {
    console.log("innerHola")
  }, function() {
    console.log("innerAdios")
  }
);

#outerBox {
  display: block;
  background-color: blue;
}

#innerBox {
  display: block;
  width: 50%;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>

Answer 4

Вы можете просто сделать это на jQuery.

      /* Mouse Enter */
      $('.outerBox').bind('mouseover',function(){
           alert("true");
      });

      /* Mouse Outer */
      $('.innerBox').bind('mouseout', function(){               
           alert("false"); 
      });