Question

我正在尝试使用Chrome扩展程序，我发现了一个奇怪的弹出窗口行为。

在popup.html中是一个元素<a id="grantexpert">...</a>，在popup.js中，我想在单击时更改此元素的背景颜色。文档准备好后立即更改颜色的变化。但是在单击事件中，单击时颜色会在很短的时间内变化（只是闪烁），然后立即返回到原始设置。看似弹出窗口在点击事件后再次重新加载。

清单：

  "browser_action": {
    "default_popup": "popup/popup.html"
  },

popup.html：

<!DOCTYPE html>
  <head>
    <script src='../other/jquery-3.1.1.min.js'></script>
    <script src='popup.js'></script>
  </head>

  <body style="width:250px;">

    <a class="testitem" href id="grantexpert">grantexpert.sk</a>

  </body>
</html>

popup.js：

(function($) {

  $(document).ready(function() {

    //$("#grantexpert").css('font-size', '28px'); - this works

    // this does not work
    $('#grantexpert').click(function () {
      $(this).css('font-size', '28px');
    });

  });

})(jQuery);

为什么元素会改变闪烁的颜色，但是在点击事件之后不会保留调整后的属性并将其还原回来？

Answer 1

尝试删除href上的空a：

<a class="testitem" href id="grantexpert">grantexpert.sk</a>

为：

<a class="testitem" id="grantexpert">grantexpert.sk</a>

Answer 2

这会在点击链接时重新加载页面。

<a href ...

尝试在链接中添加NOP

<a href="javascript:;" ...

或像其他建议一样删除它

<a ...

这是一个类似的问题 Is an empty href valid? 和Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Answer 3

从标签中删除href。 href将更改弹出窗口的url，导致弹出窗口刷新。通过删除它，您不会在点击时更改网址。

Answer 4

我经历过类似的事情。当我在弹出窗口上有一个简单的按钮时：

<button id="myButton">My Button</button>

点击它会重新加载弹出窗口。要避免此行为，您需要阻止发生默认事件。例如，使用jQuery：

$("#myButton").click(function(event){
  event.preventDefault(); // needed to prevent the popup from being reloaded
  // do something here
  showMessage("My Button has been clicked");
});

Chrome扩展程序 - 为什么点击弹出窗口中的事件刷新弹出式HTML？

4 个答案: