Question

我有下一个链接：

<a id="HeaderImage1Tab" style="display: block;" onclick="HeaderImage1Tab(this);" href="javascript:void(0)">- Header Image 1</a>

点击此链接调用下一个js代码：

function HeaderImage1Tab(link) {
    if (link.innerText == "+ Header Image 1") {
        document.getElementById("HeaderImage1Table").style.display = 'block';
        link.innerText = "- Header Image 1";
    } else {
        document.getElementById("HeaderImage1Table").style.display = 'none';
        link.innerText = "+ Header Image 1";
    }
}

它基本上只是在链接下面显示/隐藏表格块。除Firefox外，所有浏览器均适用。在Firefox中，我需要双击链接以触发代码并查看表格块。最奇怪的是，我需要第一次双击，然后按预期工作。

更新＃1：我正在使用asp.net网站。我也有大约15个链接，就像我在同一页面上提到的那样。

解决

更新＃2 ：使用textContent代替innerText解决问题。似乎Firefox不支持inner text。

更新＃3： This JS修复了IE8及更早版本中textContent的修复问题：

if (Object.defineProperty && Object.getOwnPropertyDescriptor &&
     Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
    !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
  (function() {
    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
    Object.defineProperty(Element.prototype, "textContent",
      { 
        get : function() {
          return innerText.get.call(this)
        },
        set : function(x) {
          return innerText.set.call(this, x)
        }
      }
    );
  })();

Answer 1

正如Felix Kling在评论中所说，FireFox不支持innerText，你必须使用textContent（here）。

双击是显示和隐藏表的原因是第一次单击时，它将未定义的链接.innerText（因为该属性不存在）与“+标题图像1”进行比较。值不相等，因此运行第二个代码块，在链接对象上创建innerText属性并将其设置为“+ Header Image 1”。之后，您的逻辑将起作用（虽然它不会成功更改链接中的实际文本），因为Javascript将允许您在任何对象上设置属性，即使这些属性不执行任何操作。

为什么在Firefox中使用javascript：void（0）双击期望而不是单击？

解决

1 个答案: