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

我在使用CSS Sprites和DIV以及由jQuery动态设置的Click处理程序的组合设置一些图标/按钮时遇到了一些麻烦。相邻DIV点击不正当触发的事件

虽然我相信我并排定位DIV，并为每个动态使用jQuery创建一个点击处理程序，但我发现反而是右边的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:[email protected]"; }); 
      $("#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>

NB：

了div的彩色背景是那里只是为了证实自己，我还没有在不经意间让他们太宽，从而使他们坐在另一个之上。
为了测试目的，相关代码已被分离到自己的HTML页面中。它实际上完全生活在另一个地方。例如，我有一个包含对jQuery的引用的母版页;它不会被添加到这个页面中，如所示的HTML示例。为了隔离这个错误，我将上述HTML分开了。上面的代码应该运行并展示所描述的错误，如果您将其剪切并粘贴到的HTML页面中。

来源

2013-03-30 Deleted

发生这种情况是因为您正在自行关闭您的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-30 14:29:32 flemingslone

非常感谢您快速准确的答复。我注意到一些奇怪的自动关闭标签故障（例如，如果您将其SCRIPT标签设为自闭标签，则上例中的jQuery库包含链接不起作用）。不过，我从来没有猜到过这是问题。这是否意味着我的“linkedInIcon”，“emailIcon”和“rssIcon”DIV实际上坐在*“youTubeIcon”DIV内部，因为它正在采用自我关闭的“/>”最终的DIV实际上是第一个DIV的结束标记？ – Deleted

这正是它的意思:)请注意，一旦你关闭所有的div，它会吹掉你目前的预期样式。 – flemingslone

是的，我看到了造型问题。这可能是我不应该使用DIV的标志，而是有超链接的源图像由CSS设置。无论如何，非常感谢您的帮助。我已经将答案标记为正确答案。我认为我还是一个新手，也不愿意赞成它，否则我会这么做。 – Deleted

刚刚结束，如果任何人发现自己与这个相同的问题。为了提高速度，我决定坚持使用DIV，并通过CSS显示内联块来修复一旦修复了最初的bug后出现的格式问题。下面是最终的代码是如何结束：

<!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:[email protected]"; }); 
      $("#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，因为在所有的所有它做的是增加一个点击处理程序，并就更能简洁地使用超链接为flemingslone指示来完成。我使用jQuery的事实只是从开发的角度来看遗留问题，当时jQuery所做的远不止是设置Click处理程序。

来源

2013-03-30 15:18:51 Deleted

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

回答

相关问题