点击触发Tooltip嵌入网站报错：$ is not a function 技术求助

出现$ is not a function的核心原因是jQuery未正确加载，或者**$标识符被其他脚本占用**，以下是针对性的解决方法：

一、排查并修复jQuery加载问题 #

1. 修复混合内容加载限制 #

你的HTML中引入jQuery用的是HTTP协议：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>

如果你的网站是HTTPS协议，浏览器会阻止HTTP资源加载，导致jQuery未加载。改成HTTPS链接或相对协议：

<!-- 推荐：相对协议，自动适配网站HTTP/HTTPS -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.3.2.js"></script>

<!-- 或者直接用HTTPS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.3.2.js"></script>

2. 确保加载顺序正确 #

jQuery必须在你的自定义JS代码之前加载，否则自定义JS执行时jQuery还未初始化。正确的顺序应该是：

<!-- 先加载jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.3.2.js"></script>
<!-- 再加载你的自定义JS -->
<script type="text/javascript">
  $(document).ready(function(){
      $('.fullscreen-click-area').click(showBox).mousemove(hideBox);
      function showBox(e){
          $('.tooltip').fadeIn().css({ left:  e.pageX, top: e.pageY });
      }
      function hideBox(){
          $('.tooltip').fadeOut();
      }
  });
</script>

3. 升级jQuery版本 #

你用的jQuery 1.3.2是2009年的老旧版本，存在大量兼容性问题，建议升级到稳定的3.x版本，比如：

<script type="text/javascript" src="//code.jquery.com/jquery-3.7.1.min.js"></script>

二、解决$被其他脚本占用的问题 #

如果网站中同时引入了其他使用$的脚本（比如Prototype），会导致jQuery的$被覆盖，可通过两种方式解决：

1. 直接使用jQuery代替$ #

把所有$替换成jQuery：

jQuery(document).ready(function(){
    jQuery('.fullscreen-click-area').click(showBox).mousemove(hideBox);
    function showBox(e){
        jQuery('.tooltip').fadeIn().css({ left:  e.pageX, top: e.pageY });
    }
    function hideBox(){
        jQuery('.tooltip').fadeOut();
    }
});

2. 使用jQuery的noConflict模式 #

保留$在回调内的使用权限：

jQuery.noConflict();
jQuery(document).ready(function($){
    // 这里可以正常使用$
    $('.fullscreen-click-area').click(showBox).mousemove(hideBox);
    function showBox(e){
        $('.tooltip').fadeIn().css({ left:  e.pageX, top: e.pageY });
    }
    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

额外优化建议 #

你的CSS中.fullscreen-click-area的定位可以简化，不需要top:50%+transform，直接用：

.fullscreen-click-area {
    background-color: #7F7F7F;
    position: fixed; /* 用fixed更适合全屏覆盖 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

内容的提问来源于stack exchange，提问作者John