Настройка onmouseover на ячейке таблицы

Во второй (правой/бинговой) записи таблицы я понимаю, почему наведение от изображения на строку «bing» может привести к увольнению bingfn().Настройка onmouseover на ячейке таблицы

Но первая (левая/google) таблица имеет onmouseover в <td>, поэтому я ожидаю, что зависание от изображения к тексту и обратно не приведет к увеличению счетчика. Почему счетчик увеличивается? И что-то не так с наличием единственного <a> вокруг комбинации предметов (<img>, <br />, и некоторый текст, в данном случае)?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
     <meta content="utf-8" http-equiv="encoding"> 
    </head> 
    <body> 
     <h3>On Mouse Over in tables</h3> 
     <table> 
      <tr> 
       <td onmouseover="googlefn()"> 
        <a href="http://google.com/"> 
         <img width="100" src="google.jpg"> 
         <br /> 
         Google 
        </a> 
       </td> 
       <td> 
        <p onmouseover="bingfn()"> 
         <a href="http://bing.com/"> 
          <img width="100" src="bing.jpg"><br /> 
          Bing</a></p> 
       </td> 
      </tr> 
      <tr> 
       <td id="gcountarea">G.count</td> 
       <td id="bcountarea">B.count</td> 
      </tr> 
     </table> 

     <script> 
      var gcount = 0; 
      var bcount = 0; 

      function googlefn() { 
       document.getElementById("gcountarea").innerHTML = gcount+=1; 
      } 

      function bingfn() { 
       document.getElementById("bcountarea").innerHTML = bcount+=1; 
      } 
     </script> 

    </body> 
</html>

источник

2016-02-17 Calaf

Если вы хотите, я могу сделать мой ответ элегантен, как хорошо, хотя функциональная мощь следует предпочесть ... и работать :) – LGSon

@LGSon Я хотел бы это. Я еще не проверил «правильный» ответ, потому что вижу, что то, что вы написали, технически полностью отвечает на вопрос, сохраняя мой грязный код, в то время как ответ Сукимы указывает, как это должно быть сделано, пропуская суть вопроса: как чтобы избежать ненужного запуска событий. Итак, добавление к вопросу: предположим, что рассматриваемая таблица довольно обширна. Как бы вы это сделали? – Calaf

Это увеличивает потому, что при перемещении мыши на изображение/ссылку он запускает новую mouseover, и из-за event bubbling он рассчитывает снова.

Я обновил свой сценарий, чтобы проверить, какие элементы мыши над перед подсчетом, а также изменила мероприятие от mouseover к mouseenter, так что не считается, когда мышь залезла в td/p от изображения/ссылки.

Обновлено

В соответствии с просьбой (желанный), я сделал сценарий более динамичным, поэтому, добавив атрибут data-counter к элементу, придать ему значение, как googlecounter, а затем использовать то же самое значение (googlecounter) в качестве идентификатора на элементе, к которому счетчик должен быть записан, и вуаля ... :)

var els = document.querySelectorAll('[data-counter]'); 
 
for (i=0; i < els.length; i++) { 
 
    els[i].hitcounter = 0;  
 
    els[i].addEventListener("mouseenter", function(e){   
 
    if(e.target.hitcounter != undefined) {   
 
     e.target.hitcounter++; 
 
     document.getElementById(e.target.getAttribute('data-counter')).innerHTML = e.target.hitcounter;   
 
    }   
 
    });  
 
}

<h3>On Mouse Over in tables</h3> 
 
<table> 
 
    <tr> 
 
    <td id="td" data-counter="googlecounter"> 
 
     <a href="http://google.com/"> 
 
     <img width="100" src="google.jpg"> 
 
     <br /> 
 
     Google 
 
     </a> 
 
    </td> 
 
    <td> 
 
     <p id="p" data-counter="bingcounter"> 
 
     <a href="http://bing.com/"> 
 
      <img width="100" src="bing.jpg"><br /> 
 
      Bing</a></p> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td id="googlecounter">G.count</td> 
 
    <td id="bingcounter">B.count</td> 
 
    </tr> 
 
</table>

источник

2016-02-17 23:30:24 LGSon

Я думаю, что я сломал бы это на функции и инкапсулировал бы состояния в класс. Например:

function Counter(identifier) { 
 
    this.count = 0; 
 
    this.identifier = identifier; 
 
    this.el = document.querySelector('.counter.' + identifier); 
 
    this.hoverEl = document.querySelector('[data-counter=' + identifier + ']'); 
 
} 
 
Counter.prototype.includesElement = function(el) { 
 
    return this.hoverEl.contains(el); 
 
}; 
 
Counter.prototype.mark = function() { 
 
    this.count++; 
 
    return this; 
 
}; 
 
Counter.prototype.display = function() { 
 
    this.el.innerHTML = '' + this.count; 
 
    return this; 
 
}; 
 

 
var counters = [ 
 
    new Counter('google'), 
 
    new Counter('bing') 
 
]; 
 

 
document.addEventListener('mouseover', function (evt) { 
 
    counters.forEach(function (counter) { 
 
    if (counter.includesElement(evt.target)) { 
 
     counter.mark().display(); 
 
    } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
 
     <meta content="utf-8" http-equiv="encoding"> 
 
    </head> 
 
    <body> 
 
     <h3>On Mouse Over in tables</h3> 
 
     <table> 
 
      <tr> 
 
       <td data-counter="google"> 
 
        <a href="http://google.com/"> 
 
         <img width="100" src="google.jpg"> 
 
         <br /> 
 
         Google 
 
        </a> 
 
       </td> 
 
       <td data-counter="bing"> 
 
        <p> 
 
         <a href="http://bing.com/"> 
 
          <img width="100" src="bing.jpg"><br /> 
 
          Bing</a></p> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td class="counter google">G.count</td> 
 
       <td class="counter bing">B.count</td> 
 
      </tr> 
 
     </table> 
 
    </body> 
 
</html>

источник

2016-02-18 00:12:27 Sukima

Мне что-то не хватает. Я не вижу, где вы ссылались на скрипт js из html-файла. – Calaf

добавляется переполнением стека. Это похоже на то, что он был вставлен в тег '

Настройка onmouseover на ячейке таблицы

ответ

Смежные вопросы