Question

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

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

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

的JSLint
Firebug addon
w3c validator

我改变了一些代码。

我已经明白我的问题与DOM有关。

所以这是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>

正文标记中的小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

在Firefox中不支持

offsetX，这就是它无效的原因。

您应该使用e.pageX代替。

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

Answer 2

E.Offsetx不支持在firefox中使用e.clientX而是尝试

Answer 3

阿德诺说：没有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

Firefox无法理解的Javascript代码但适用于所有其他浏览器

3 个答案: