相鄰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點擊不正當觸發的事件

回答

相關問題