Question

我创建了一个右键菜单打开代码，当我在外部文件中添加js代码时不起作用，而当我在该页面上添加js代码时则起作用。

是的，stackoverflow中有很多帖子都存在相同的问题，但是我试图做到所有解决方案都在那里。然后，在我创建完帖子后。

即使我添加了wimdow load, Document load和所有功能，也无法正常工作。

下面是我的js代码，当我在js文件中添加代码时，它如何工作。

$(document).ready(function() {
//$(function() {
  var doubleClicked = false;
  $(document).on("contextmenu", function (e) {
   if(doubleClicked == false) {
    e.preventDefault();
    var windowHeight = $(window).height()/2;
    var windowWidth = $(window).width()/2;
    if(e.clientY > windowHeight && e.clientX <= windowWidth) {
      $("#arltcntn").css("left", e.clientX);
      $("#arltcntn").css("bottom", $(window).height()-e.clientY);
      $("#arltcntn").css("right", "auto");
      $("#arltcntn").css("top", "auto");
    } else if(e.clientY > windowHeight && e.clientX > windowWidth) {
      $("#arltcntn").css("right", $(window).width()-e.clientX);
      $("#arltcntn").css("bottom", $(window).height()-e.clientY);
      $("#arltcntn").css("left", "auto");
      $("#arltcntn").css("top", "auto");
    } else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
      $("#arltcntn").css("left", e.clientX);
      $("#arltcntn").css("top", e.clientY);
      $("#arltcntn").css("right", "auto");
      $("#arltcntn").css("bottom", "auto");
    } else {
      $("#arltcntn").css("right", $(window).width()-e.clientX);
      $("#arltcntn").css("top", e.clientY);
      $("#arltcntn").css("left", "auto");
      $("#arltcntn").css("bottom", "auto");
    }
    $("#arltcntn").fadeIn(50, FocusContextOut());
      doubleClicked = true;
    } else {
      e.preventDefault();
      doubleClicked = false;
      $("#arltcntn").fadeOut(50);
    }
  });
  function FocusContextOut() {
    $(document).on("click", function () {
      doubleClicked = false; 
      $("#arltcntn").fadeOut(50);
      $(document).off("click");           
    });
  }
});

#arltcntn {
     display: none; position: fixed; border: 1px solid #b1b0b0; width: 250px; padding: 10px 0px 10px 15px; background: #ffffff; box-shadow: 2px 2px 2px 0px #989898; border-radius: 1px; z-index: 99999;
     
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arltcntn">hello world i am menu</div>

这不是垃圾邮件，我研究了stackoverflow并尝试这样做，但这没有帮助。我相信我的问题，它将对像我这样的人有所帮助。

Answer 1

您必须确保在尝试从中加载脚本的文件之前先引用JQuery文件。

Answer 2

实际上，您错过了添加HTML页面的脚本文件。

包含jquery库后，您必须包含javascript文件

就像

<script type="text/javascript" src="yourfile.js"></script>

js外部文件不起作用，但在页面上起作用。为什么？

2 个答案: