0

我在使用 CSS Sprite 的组合设置一些图标/按钮时遇到了一些麻烦，并且 DIV 与由 jQuery 动态设置的 Click 处理程序相结合。

虽然我相信我将 DIV 并排放置，并使用 jQuery 为每个 DIV 动态创建一个单击处理程序，但我发现发生的是，更靠右的 DIV 以某种方式获取其左侧 DIV 的单击处理程序除了我打算让他们拥有的处理程序之外。因此，例如，我打算用于我的“电子邮件”链接的点击处理程序除了启动新电子邮件之外，还打开了我的 YouTube 频道和我的 LinkedIn 个人资料，因为充当这些其他功能的按钮的 DIV 被定位到它的左边。谁能看到可能导致这种行为的原因？

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .icon
        {
            height: 68px;
            width: 56px;
            background-image: url('https://lh4.googleusercontent.com/-HylbRS7gQyA/UVbSTXQYs5I/AAAAAAAAAs8/5J8Ij9mr_qk/s800/CommsIconsCSSSprites.png');
            position: relative;
            cursor:hand; cursor:pointer;
        }

        .youTube
        {
            background-position: 0px 0px;
            background-color:yellow;
        }

        .linkedIn
        {
            background-position: -56px 0px;
            left:56px;
            background-color:green;
        }

        .email
        {
            background-position: -112px 0px;
            left:56px;
            background-color:blue;
        }

        .rss
        {
            background-position: -168px 0px;
            left:56px;
            background-color:red;
        }
    </style>

    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function setCommsIcons() {
            $("#youTubeIcon").click(function () { window.open("http://www.youtube.com/user/RPPdotNet?feature=watch"); });
            $("#linkedInIcon").click(function () { window.open("http://www.linkedin.com/in/rachelppierson"); });
            $("#emailIcon").click(function () { window.location.href = "mailto:rachel.pierson@hotmail.co.uk"; });
            $("#rssIcon").click(function () { window.open("http://feeds.feedburner.com/RachelPiersonWorkInProgress"); });
        }

        function shiftImagesJustToSuitIE() {
            // Move the images up a fraction in i.e. to match other browsers
            if ($.browser.msie) {
                $.each($("#youTubeIcon, #linkedInIcon, #emailIcon, #rssIcon"), function (i, val) {
                    with (val) { val.style.pixelTop = val.style.pixelTop + 30; }
                });
            }
        }

        $(document).ready(function () {
            setCommsIcons();
            shiftImagesJustToSuitIE();
        });

    </script>

    <title></title>
</head>
<body>
    <div id="youTubeIcon" class="icon youTube" />
    <div id="linkedInIcon" class="icon linkedIn" />
    <div id="emailIcon" class="icon email" />
    <div id="rssIcon" class="icon rss" />
</body>
</html>

注意：

  • DIV 上的彩色背景只是为了向我自己确认我没有不经意地把它们弄得太宽，从而使它们彼此重叠。
  • 仅出于测试目的，相关代码已被分离到其自己的 HTML 页面中。它实际上完全生活在另一个地方。例如，我有一个包含对 jQuery 的引用的母版页；它不是只为这一页添加的，如显示的示例 HTML 中所示。出于隔离此错误的目的，我已将上述 HTML 分离出来。如果您将其剪切并粘贴到 HTML 页面中，上面的代码应该会运行并显示所描述的错误。
4

2 回答 2

2

发生这种情况是因为您正在自行关闭 div，并且单击处理程序正在应用于目标中包含的所有 div。将它们更改为正确关闭将解决问题。

您的标记如何实际呈现：

<div id="youTubeIcon" class="icon youTube">
    <div id="linkedInIcon" class="icon linkedIn">
        <div id="emailIcon" class="icon email">
            <div id="rssIcon" class="icon rss">
            </div>
        </div>
    </div>
</div>

您的标记应该如何编写：

<div id="youTubeIcon" class="icon youTube"></div>
<div id="linkedInIcon" class="icon linkedIn"></div>
<div id="emailIcon" class="icon email"></div>
<div id="rssIcon" class="icon rss"></div>
于 2013-03-30T14:29:32.560 回答
1

总结一下，以防其他人发现自己遇到同样的问题。为了速度，我决定坚持使用 DIV，并通过 CSS 使它们显示内联块，以修复最初的错误修复后出现的格式问题。以下是最终代码的结束方式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .icon
        {
            height: 68px;
            width: 56px;
            background-image: url('https://lh4.googleusercontent.com/-HylbRS7gQyA/UVbSTXQYs5I/AAAAAAAAAs8/5J8Ij9mr_qk/s800/CommsIconsCSSSprites.png');
            position: relative;
            cursor:hand; cursor:pointer;
            display: inline-block;
            *display: inline;   /* just for Internet Explorer */
            zoom: 1;            /* just for Internet Explorer */
        }

        .youTube { background-position: 0px 0px; }

        .linkedIn { background-position: -56px 0px; }

        .email { background-position: -112px 0px; }

        .rss { background-position: -168px 0px; }
    </style>

    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function setCommsIcons() {
            $("#youTubeIcon").click(function () { window.open("http://www.youtube.com/user/RPPdotNet?feature=watch"); });
            $("#linkedInIcon").click(function () { window.open("http://www.linkedin.com/in/rachelppierson"); });
            $("#emailIcon").click(function () { window.location.href = "mailto:rachel.pierson@hotmail.co.uk"; });
            $("#rssIcon").click(function () { window.open("http://feeds.feedburner.com/RachelPiersonWorkInProgress"); });
        }

        $(document).ready(function () {
            setCommsIcons();
        });

    </script>

    <title></title>
</head>
<body>
    <div id="youTubeIcon" class="icon youTube"></div>
    <div id="linkedInIcon" class="icon linkedIn"></div>
    <div id="emailIcon" class="icon email"></div>
    <div id="rssIcon" class="icon rss"></div>
</body>
</html>

可以说我根本不应该使用 jQuery，因为它所做的只是添加一个 Click 处理程序，并且可以使用 flemingslone 指示的超链接更简洁地完成。从开发的角度来看，我使用 jQuery 的事实只是一个遗留问题，当时 jQuery 所做的远不止设置 Click 处理程序。

于 2013-03-30T15:18:51.980 回答