Firefox 不理解 Javascript 代码但适​​用于所有其他浏览器

Question

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

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

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

1. Jslint
2. 萤火虫插件
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;

Answer 2

E.Offsetx 在 Firefox 中不支持使用 e.clientX 代替并尝试

Answer 3

正如 adeneo 所说： 没有offsetX 但也没有reliable offsetWidth 所以我使用了更多的 jQuery（它可以跨浏览器工作，并在您的代码注释中注明。

var outside, inside;
outside = $("#outside");    
inside = $("#inside");

$("#outside").on('click', function (e) {
    var ofx =  e.offsetX==undefined?e.pageX:e.offsetX;
    var position = (ofx / outside.outerWidth()) * 100;

    if (position >= 0 && position <= 10) {
        inside.css("width", "0%");
    }
    // etc.

工作jsfiddle