Setting onmouseover on a table cell
Question
In the second (right/bing) table entry, I understand why hovering from the image to the 'bing' string could cause bingfn() to be fired.
But the first (left/google) table has the onmouseover in the <td> , hence I'm expecting that hovering from the image to the text and back will not cause the counter to increase. Why does the counter increase? And is there anything wrong with having a single <a> around a combination of items (an <img> , a <br /> , and some text, in this case)?
<!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>
2 answers
solution1
1 2016-02-18 00:12:27
I think I would break this out into functions and encapsulate the states into a class. For example:
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>
solution2
0 ACCPTED 2016-02-17 23:30:24
It increases because when you move mouse over the image/link it fires a new mouseover , and because of event bubbling it counts again.
I updated your script to check which elements the mouse is over before counting and also changed the event from mouseover to mouseenter , so it doesn't count when the mouse reenters the td / p from the image/link.
Updated
As requested (wished for), I made the script more dynamic, so by adding the attribute data-counter to an element, give it a value like googlecounter and then use the same value ( googlecounter ) as an id on an element, to which the counter should be written, and voila...:)
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.