浏览器之间的javascript鼠标事件兼容性问题

javascript mouse event compatibility issue between browsers

本文关键字：事件 兼容性 问题 鼠标 javascript 之间 浏览器      更新时间：2023-09-26

我是web开发的新手。我有一个代码，应该在点击图像时更改图像，并在发布时更改回图像。它还计算它被点击的次数。我在Safari上构建并测试了这个代码，没有遇到任何问题。它在Safari上的工作与预期一样。然而，它在Chrome和IE上不起作用（我还没有测试过任何其他浏览器）。

我通常使用HTML5 Boilerplate，但我减少了代码，以便在这里显示（这个版本也不起作用）。

我已经给出了下面页面的代码。我该怎么做才能让它在每个浏览器上都能工作。它在浏览器上表现不同的原因是什么？

提前感谢

<!html>
<html>
<head>
      <title></title>
    <script type="text/javascript">
    var count = 0;
    function incrementCount()
    {
        count++;
        document.getElementById( "count").innerHTML = count;
    }
    function pushTheButton()
    {
        document.images("bigRedButton").src = "img/pressed.gif";
        return true;
    }
    function releaseTheButton()
    {
        document.images("bigRedButton").src = "img/unpressed.gif";
        return true;
    }
    </script>
</head>
<body>
      <div role="main">
        <p>
            <img src = "img/unpressed.gif" name="bigRedButton" onmousedown="pushTheButton()" onmouseup="releaseTheButton()" onclick="incrementCount()"/>
            </br>
            Click Count:<p id="count">0</p>
        </p>
      </div>
</body>
</html>

在Chrome中测试时，请记住使用其JavaScript控制台来监视错误。在这种情况下，它返回以下内容：

未捕获类型错误：对象#的属性"images"不是函数

当您试图访问document.images（"bigRedButton"）时，问题出现在第18行和第24行。document.image是一个数组（或者可能是一个对象），而不是函数。应该是：

document.images["bigRedButton"].src

我不知道为什么它能在Safari上运行。

http://www.w3schools.com/jsref/coll_doc_images.asp

document.images是一个整数索引的图像数组。要真正确定，您应该使用：

document.images[0].src = ...

尽管在许多情况下也可以使用名称访问图像。

相关文章：