4

我正在使用 javascript 在鼠标悬停时更改一些 asp 按钮的设置。它在 IE 中工作。但不能在 Firefox 中工作。是否有任何其他 JavaScript 代码可以支持几乎所有浏览器？我的代码如下

<script type="text/javascript">
        var previousColor;
        function Changecolor() {
            previousColor = window.event.srcElement.style.backgroundColor;
            window.event.srcElement.style.backgroundColor = "Blue";
            window.event.srcElement.style.cursor = "hand";
        }
        function RestoreColor() {
            window.event.srcElement.style.backgroundColor = previousColor;
        }
</script>


<asp:Button ID="btnSearch" runat="server" BackColor="#800000" Font-Bold="True" Font-Names="Arial" onmouseover="Changecolor();" onmouseout="RestoreColor();" ForeColor="White" Height="28px" OnClick="btnSearch_Click2" Text="Search Jobz" Width="117px" />
4

4 回答 4

8

查看有关events的 Mozilla 开发人员中心文档。在 Internet Explorer 中，全局事件对象是在触发事件时创建的。在符合标准的浏览器中，事件对象作为分配给触发事件的函数的第一个参数传递。如果您的事件是在 HTML 中定义的，则事件对象会在变量名下创建，event并且可以传递给您正在调用的函数。

另请注意，该event.srcElement属性仅适用于 IE，大多数其他浏览器都使用该属性event.target。

考虑到这一点，您的函数应如下所示：

<script>
        var previousColor; 
        function Changecolor(evt) {
            var srcEl = evt.srcElement || evt.target;
            previousColor = srcEl.style.backgroundColor; 
            srcEl.style.backgroundColor = "Blue"; 
            srcEl.style.cursor = "pointer"; 
        } 
        function RestoreColor(evt) {
            var srcEl = evt.srcElement || evt.target;
            srcEl.style.backgroundColor = previousColor; 
        } 
</script> 


<asp:Button ID="btnSearch" runat="server" BackColor="#800000" Font-Bold="True" Font-Names="Arial" onmouseover="Changecolor(event);" onmouseout="RestoreColor(event);" ForeColor="White" Height="28px" OnClick="btnSearch_Click2" Text="Search Jobz" Width="117px" />
于 2010-01-22T09:29:45.467 回答
1

为什么不使用 CSS（及其:hover伪类）而不是 JS？

但是，如果您出于某些原因需要使用 JS，只需将对元素的引用作为函数参数传递：

function Cangecolor(ref){
  prevousColor = ref.style....;

...

onmouseover="changecolor(this)"

现在你的代码不起作用，因为 IE 使用不同的事件模型（好的浏览器使用 W3C 事件模型，但 IE 使用它自己的）。您可以在以下位置阅读有关 W3C/IE 事件模型的信息：如何均衡 IE 和 W3C 事件模型]

于 2010-01-22T09:35:31.933 回答
1

您不需要打扰事件对象。此外，光标 CSS 属性的正确值是“指针”而不是 IE 特定的“手”，除非您需要支持 IE 5 或 5.5。

<script type="text/javascript">
        var previousColor;

        function changeColor(el) {
            var s = el.style;
            previousColor = s.backgroundColor;
            s.backgroundColor = "Blue";
            s.cursor = "pointer";
        }
        function restoreColor(el) {
            el.style.backgroundColor = previousColor;
        }
</script>


<asp:Button ID="btnSearch" runat="server" BackColor="#800000"
    Font-Bold="True" Font-Names="Arial"
    onmouseover="changeColor(this);" onmouseout="restoreColor(this);"
    ForeColor="White" Height="28px" OnClick="btnSearch_Click2"
    Text="Search Jobz" Width="117px" />
于 2010-01-22T09:38:53.037 回答
1

我在下面的代码中遇到了同样的（firefox 中的window.event）问题。

<html>
<body onkeyup="fClosePop();">
</body>
<script language="javascript">
  function fClosePop(){
        var e= (window.event)?event.keyCode:evt.which;  
        if( e.keyCode ==27)
        {
            try
            {
                alert(1);
            }
            catch(e)
            {

            }
        }      
    } 
</script>
</html>

然后我尝试调整代码并找到下面的解决方案。我刚刚从函数传递了事件。

<html>
<body onkeyup="fClosePop(even);">
</body>
<script language="javascript">
  function fClosePop(e){
           if( e.keyCode ==27)
           {
                      try
                      {
                       alert(1)
                       }
                      catch(e)
                      {

                      }
            }      
    } 
</script>
</html>

我希望这对你有帮助。

于 2012-03-02T07:58:19.477 回答