Question

使用CSS Sprites和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示例。为了隔离这个bug，我把上面的HTML分开了。该上面的代码应该运行并显示所描述的错误，如果您将其剪切并粘贴到其中一个HTML页面。

Answer 1

这种情况正在发生，因为您正在自行关闭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>

Answer 2

结论是，如果其他人发现自己遇到同样的问题。为了速度，我决定坚持使用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处理程序。

相邻的DIV点击不恰当地触发的事件

2 个答案: