Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Как определить на каком элементе произошло событие hover(или mouseenter)? (https://javascript.ru/forum/offtopic/45977-kak-opredelit-na-kakom-ehlemente-proizoshlo-sobytie-hover-ili-mouseenter.html)

Boshnik 23.03.2014 03:35
Как определить на каком элементе произошло событие hover(или mouseenter)?
 
Всем привет!

Подскажите, пожалуйста, как определить на каком элементе произошло событие hover(или mouseenter) и добраться до его ребенка, чтобы применить css свойство?

Нужно определить элемент из коллекции.
Пример (с 2-x элементов):
Словить на div.dFoto или div.item
Добраться до div.dFoto > .h1

Заранее благодарен.

<div id="example">
          <div class="item">
            <div class="dFoto"><span class="h1">
                <h1>Текст 1</h1>
              </span></div>
          </div>
          <div class="item">
            <div class="dFoto"><span class="h1">
                <h1>Текст2</h1>
              </span></div>
          </div>
      
      </div>

danik.js 23.03.2014 04:20
И кстати, нельзя пихать <h1> в <span>.
<style>
.dFoto:hover .h1{
    color: red;
}
</style>
<div id="example">
          <div class="item">
            <div class="dFoto"><span class="h1">
                <h1>Текст 1</h1>
              </span></div>
          </div>
          <div class="item">
            <div class="dFoto"><span class="h1">
                <h1>Текст2</h1>
              </span></div>
          </div>
       
      </div>

Vlasenko Fedor 23.03.2014 04:21 
<style>
  div.item {
    background-color: green;
    width: 200px;
    margin: 10px;
    padding: 5px;
  }
</style>
<div id="example">
  <div class="item">
    <div class="dFoto">
      <span class="h1">
        Текст 1
      </span>
    </div>
  </div>
  <div class="item">
    <div class="dFoto">
      <span class="h1">
        Текст2
      </span>
    </div>
  </div>
</div>
<script>
  window.onload = function () {
    var aals = document.querySelectorAll('#example>div.item'),
      len = aals.length,
      divmouse = function (e) {
        var el = e ? e.target : window.event.srcElement;
        var ch = el.querySelector('span.h1');
        alert(ch.innerHTML);
      };
    for (; len--; aals[len].onmouseenter = divmouse);
  };
</script>

danik.js 23.03.2014 04:36
Poznakomlus,

(https://developer.mozilla.org/en-US/...nce/mouseenter)

Vlasenko Fedor 23.03.2014 05:17
danik.js,
буду знать
Никогда даже не использовал это событие :)

ruslan_mart 23.03.2014 05:24
Цитата:
Сообщение от Poznakomlus
for (; len--; aals[len].onmouseenter = divmouse);
Фу, аж глаза режет. :-?

danik.js 23.03.2014 05:41
Цитата:
Сообщение от Ruslan_xDD
Фу, аж глаза режет.
Согласен )

Vlasenko Fedor 23.03.2014 05:50
Цитата:
Сообщение от Ruslan_xDD
Фу, аж глаза режет
очки протри и на закуску
while(len--) aals[len].onmouseenter = divmouse;


for (; len--;) aals[len].onmouseenter = divmouse;

ruslan_mart 23.03.2014 12:57
Poznakomlus, а что грубишь то? Бомбануло? :D

Цитата:
while(len--) aals[len].onmouseenter = divmouse;
В твоём стиле :D

while(len-- && aals[len].onmouseenter = divmouse);

Boshnik 23.03.2014 22:57
Как все просто, а я усложнял себе задачу :)

danik.js Спасибо тебе за решение и отдельное спасибо за совет.

monolithed 24.03.2014 11:04
Основное отличие mouseenter/mouseleave от mouseover/mouseout заключается в том, что на на дочерних элементах нельзя поймать событие.

Именно поэтому, если нужно делегирование, то используйте mouseover/mouseout:

<script>
document.addEventListener('DOMContentLoaded', function () {
    var div = document.getElementById('div');

    div.addEventListener('mouseover', function (event) {
       var target = event.target;

      while (target != this) {
         if (target.tagName.toLowerCase() == 'p') {
            alert(target.textContent);
            break;
         }

         target = target.parentNode;
      }
    });   
});
</script>
  
<div id="div">
    <p>text 1</p>
    <p>text 2</p>
</div>


А подписывать все дочерние элементы на события, ради mouseenter/mouseleave это по меньшей мере глупо.


Часовой пояс GMT +3, время: 18:43.