Question

在第二个（右/ bing）表条目中，我理解为什么要从图像悬停到＆＃39; bing＆＃39;字符串可能会导致bingfn()被解雇。

但是第一个（左/谷歌）表在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>

Answer 1

我想我会将其分解为函数并将状态封装到类中。例如：

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>

Answer 2

它会增加，因为当您将鼠标移到图片/链接上时，会触发新的mouseover，并且由于event bubbling，它会重新计算。

我更新了您的脚本，以便在计数之前检查鼠标所在的元素，并将事件从mouseover更改为mouseenter，因此当鼠标重新进入{{1}时，它不计算在内来自图片/链接的/ td。

的更新 的

根据要求（希望），我使脚本更具动态性，因此通过向元素添加属性p，为其赋予类似data-counter的值，然后使用相同的值（{{ 1}}）作为一个元素的id，应该写一个计数器，并且瞧...：）

googlecounter

googlecounter

在表格单元格

2 个答案: