Question

我正在开发一个网站项目，该项目要求网页显示悬停时的工具提示。由于我不会进入这里的原因，我决定使用名为dyn-web.com的网站中的库。 library效果很好但我需要对它的工作方式做一个小改动，这将使它非常适合我的应用程序。麻烦的是，我无法弄清楚它是如何运作的！

我读过的所有内容都表明您无法在CSS中执行javascript代码。但这似乎正是这个库所做的。要为任何元素（锚点，div，span等）创建工具提示，所有这些库要求您做的是：

包含＆lt; script src =＆gt;标记到库文件
将两个类名添加到将承载工具提示的HTML元素中，一个名为＆＃34; showTip＆＃34;另一个是包含工具提示文本
将工具提示文本添加到上面提到的JSON对象
创建样式以格式化工具提示您希望它的外观

如果您注意到，请不要在这些步骤中提及任何事件处理程序。此外，没有类（我能找到）称为 showTip 。没有JQuery或其他依赖项。那么如何执行javascript？

我不想在不知道它是如何工作的情况下跳进去开始更换图书馆，而且我一直想拔出我的头发。你们中的一个人能比我聪明的人解释一下吗？

Answer 1

您无法从“CSS类”运行JavaScript。

您提供的示例通过包含<script>元素来运行JavaScript。

我不会对它进行逆向工程，因为它的格式不是特别易读的。也就是说，搜索文件会找到showTip，因此可能会在DOM中搜索 HTML 类（可能是querySelectorAll，因为它肯定会将该方法用于某些东西）并使用JavaScript绑定事件处理程序（可能与addEventLister绑定，因为它包含对该方法的调用）。

如果您注意到，在这些步骤中没有提到任何事件处理程序。

JS文件使用addEventListener

此外，没有一个名为showTip的课程（我可以找到）。

您说过在上一步中将其添加到HTML元素中。如上所述，字符串出现在JavaScript文件中。

Answer 2

从您列出的步骤中，好像Dynamic Web Coding库使用JavaScript将CSS属性应用到元素中。您无法在CSS中运行JavaScript，但您当然可以使用JavaScript来应用CSS！

库可能做的是使用showTip使用JavaScript查看类document.getElementsByClassName("showTip")的所有元素。然后，它查看该元素上的另一个类，并假定它是工具提示文本的工具提示的关键。

然后，它可能会使用document.createElement()为工具提示创建一个元素，然后使用document.appendChild()或document.insertBefore()将其注入文档。他们可以在工具提示中添加一些类，以便使用.className属性应用CSS规则。

当用户将鼠标悬停并离开元素时，它也可能会使用document.addEventListener()来监听。您无需添加此代码，因为您添加的<script>标记已为您调用document.addEventListener()。

所有这些都需要一些称为DOM的东西，这是JavaScript编码人员用来操纵HTML文档的东西。这实际上非常强大和酷，所以你可以查看一个很好的教程at TutorialsPoint。

Answer 3

它适用于事件委托，它侦听整个主体上的事件，并忽略没有魔术类名称（showTip）的元素上的事件。

摘自http://www.dyn-web.com/code/tooltips/js/dw_tooltip_c.js：

   initHandlers: function() {
        var _this = dw_Tooltip;
        if (_this.ready) {
            return;
        }
        if (!_this.forTouch) {
            if (_this.activateOnClick) {
                dw_Event.add(document, 'click', _this.checkForActuator, true);
                dw_Event.add(document, "mouseup", _this.checkDocClick, true);
            } else {
                dw_Event.add(document, 'mouseover', _this.checkForActuator, true);
            }
            dw_Event.add(document, "keydown", _this.checkEscKey, true);
            if (!_this.activateOnClick && _this.activateOnFocus) {
                if (window.addEventListener) {
                    dw_Event.add(document, 'focus', _this.checkForActuator, true);
                } else if (window.attachEvent) {
                    dw_Event.add(document, 'focusin', _this.checkForActuator);
                }
            }
        } else {
            dw_Event.add(document, 'mouseover', _this.checkForActuator, true);
        }
        _this.ready = true;
    }
}

Answer 4

您可以通过一种方式制作自定义工具提示。这几乎没有开箱即用。只需要HTML和CSS来执行魔术。＆＃34;使用JS添加更多交互性＆＃34;。

<html>
   <style>
       h1 { position: relative; }

       h1:hover:after {
          content: attr(data‐hover‐response);
          color: black;
          position: absolute;
          left: 250px;
          top: -40px;
          border: solid 2px gray;
          background-color: red;
       }
   </style>
   <body>
      <br><br>
      <h1 data‐hover‐response="I am tooltip !"> I will show tooltip on Hover! </h1>
   <body>
</html>

CodePen：http://codepen.io/anon/pen/bdPQxP

你如何只用CSS类运行javascript？

4 个答案: