javascript - 按钮在 chrome 上工作但在 firefox 上不工作

Question

我用 HTML 制作了一个按钮，它在 Google Chrome 上运行良好，但在 Firefox 上完全没有反应。

我的代码:

function fbs_click() {
  var u = location.href;
  var t = document.title;
  window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t) + '&s=' + encodeURIComponent(CQuote + CAuthor), 'sharer', 'toolbar=0,status=0,width=626,height=436');
}


function rSign() {
  var test = Math.random();
  return test > 0.5 ? 1 : -1;
}
var CQuote = "",
  CAuthor = "";

function getQuote() {
  $.ajax({
    jsonp: "jsonp",
    dataType: "jsonp",
    contentType: "application/jsonp",
    url: "https://api.forismatic.com/api/1.0/?",
    data: {
      method: "getQuote",
      lang: "en",
      format: "jsonp",
    },
    success: function(quote) {
      //  document.getElementById("quote").innerHTML =  
      CQuote = quote.quoteText;
      // document.getElementById("author").innerHTML = 
      CAuthor = quote.quoteAuthor;
      document.getElementById("author").innerHTML = CAuthor;
      document.getElementById("quote").innerHTML = CQuote;
    }

  });
}


$(document).ready(function() {
  getQuote();
})


var background = document.getElementById('backimg');
var huetarget = 0;
var huecurrent = 0;
var bright = 1;

function abyssmal() {
  background.style.filter = 'hue-rotate(' + huecurrent + 'deg) ';
  if (huecurrent < huetarget) {
    huecurrent += Math.abs(huetarget - huecurrent) / 20
  }
  if (huecurrent >= huetarget) {
    huecurrent -= Math.abs(huetarget - huecurrent) / 20
  }
}
var interval = setInterval(abyssmal, 25);

$("#btnAnimate").on("click", function() {
  huetarget += (Math.random() * 50 + 50) * rSign();
  getQuote();
});

$('#tweet').on("click", function() {
  window.open("https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=" + encodeURIComponent('"' + CQuote + '"   -' + CAuthor), "_blank")
});

$('#facebook').on("click", function() {
  fbs_click();

});

/*#myDiv{
  background-color: green;
  transition : background-color 2s,opacity 2s;
    
}

#myDiv:hover{
    background-color : red;
  opacity : 0.5
  
} */

#quotebox {
  font-size: 30px;
  height: auto;
}

#authorbox {
  text-align: right;
}

.box {
  height: auto;
  margin: auto;
}

#btnAnimate {
  width: 150px;
}

.share {
  width: 50px;
  float: right;
}

.button {
  height: 50px;
  padding: 0px;
  vertical-align: middle;
  margin-top: 40px;
  color: white;
  background-color: #333c5b;
  border-radius: 3px;
  border: none;
}

button:hover {
  opacity: .8;
}

.background-tile {
  background-image: url(https://image.noelshack.com/fichiers/2017/51/3/1513771628-background-1.jpg);
  background-size: 1500px 900px;
  height: 900px;
  width: 1515px;
  padding-top: 270px;
  z-index: -1;
}

#backimg {
  filter: hue-rotate(0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="background-tile" id="backimg">
  <div class="box" id="myDiv" style="padding : 50px 50px 10px 50px;width : 45%;border-radius: 5px; background-color : #476870">
    <div id="quotebox">
      <i class="fa fa-quote-left" style="font-size:40px;margin-left : 8px "></i>
      <span id="quote"></span>
      <p id=a uthorbox>-<span id="author"></span>
        <p>
    </div>

    <button class="button quotebutton" id="btnAnimate">get quote</button>
    <button class=" share button fa fa-facebook" id="facebook"></button>
    <button class=" share button fa fa-twitter" id="tweet" style="  margin-right: 25px;"></button>
  </div>
</div>

我仔细检查了只有短语元素嵌套在按钮内。

问题:为什么按钮在 Firefox 上没有反应。

Answer 1

跨浏览器不支持某些 HTML 方法。

例如，某些功能可以在 Mozilla 和 Internet Explorer 上运行，但不能在 Chrome 上运行。

但是，在这种情况下，它表明 BODY 标签与您的内容重叠。这可能是 Mozilla 的错误，尤其是 Codepen.io，因为 W3schools 已验证该按钮功能在此浏览器上有效。