Firefox 无法理解 JavaScript 代码，但可以在所有其他浏览器中使用

Question

我必须编写一个步进进度条，它需要与所有浏览器一起使用，甚至是 IE7+。这个进度条已经写好了，但在将其合并到更大的项目之前，我注意到它不适用于 Firefox，但所有其他浏览器都有良好的行为。

我已经减少了代码，直到我开始工作，但我仍然遇到 Firefox 的显示问题。

所以我用一些工具尝试了我的代码:

1. Jslint
2. Firebug 插件
3. w3c validator

我更改了一些代码。

我知道我的问题与 DOM 有关。

这个Moz Foundation getElementById也许这就是解释。

这是CSS:

<style type="text/css">
  #outside {
    height: 18px;
    background-color: #cccacd;
    z-index: 5;
    position: relative; 
    border-style:solid;
    border-color:#24242d;
    border-width: 1px;
  }
  #inside {
    width: 0px;
    height: 100%;
    background-color: #0089cf;
    overflow: visible;
    color: white;
    white-space: nowrap;
    z-index: 10;
    position: relative; 
  }             
</style>

body标签中的小html代码

<form id="form1" runat="server" action="ProgressBar.aspx">
<div>

        <div id="outside" runat="server">
            <div id="inside" style="width: 50%;" runat="server"></div>
        </div>
</div>
</form>

最后是我的脚本

    <script type="text/javascript">

    /*jslint browser: true*/
    /*global $, jQuery, document, Modernizr*/

    function bindEvent(el, eventName, eventHandler) {
        "use strict";
        if (el.addEventListener) {
            // IE 9+, Chrome, Opéra, Safari, Firefox
            el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        // IE7, IE8
        el.attachEvent('on' + eventName, eventHandler);
    }
}

window.onload = function () {
    "use strict";

    var outside, inside;
    outside = document.getElementById("outside");
    inside = document.getElementById("inside");

bindEvent(outside, 'click', function (e) {

    var position = (e.offsetX / outside.offsetWidth) * 100;

    if (position >= 0 && position <= 10) {
        inside.style.width = "0%";
    }
    if (position > 10 && position <= 35) {
        inside.style.width = "25%";
    }
    if (position > 35 && position <= 65) {
        inside.style.width = "50%";
    }
    if (position > 65 && position <= 85) {
        inside.style.width = "75%";
    }
    if (position > 85 && position <= 100) {
        inside.style.width = "100%";
    }
    });
};

</script>

我知道我很快就能让它在 Firefox 上运行，但现在我需要你的帮助:)

Answer 1

offsetX 在 Firefox 中不受支持，这就是它不起作用的原因。

您应该改用e.pageX。

var position = ((e.pageX - outside.offsetLeft) / outside.offsetWidth) * 100;