可點擊的背景div上顯示鏈接打開兩個鏈接

我在每張幻燈片上都使用帶有背景圖像的引導程序傳送帶。每張幻燈片都有顯示在其上的鏈接。我已經回顧了一些關於SO的答案，但似乎沒有解決這個問題。以下是在傳送帶上滑動的樣子：可點擊的背景div上顯示鏈接打開兩個鏈接

  <div class="item"> 
       <div class="banner-link"> 
        <img src="myimage.jpg" height="486" width="1024" alt="image-description"> 
        <div class="holder"> 
         <div class="block"> 
          <div class="links"> 
           <strong class="title">The links</strong> 
           <a href="/about/" class="btn btn-default">About Us</a> 
           <a href="/contact/" class="btn btn-default">Contact</a> 
          </div> 
         </div> 
        </div> 
        <input type="hidden" name="link" readonly value="http://www.google.com/" /> 
       </div> 
      </div>

的jQuery：

$(document).ready(function() { 
    $('div.banner-link').click(function() { 
     if ($(this).find("input").length) { 
      window.open($(this).find("input:first").val(),'_blank'); 

     } 
    }); 
});

我的問題是，當我點擊任何一個子環節，無論是子鏈接和背景圖像鏈接被點擊。子鏈接在主選項卡中打開，後臺jQuery點擊事件在新選項卡中打開。

我試過z-index的一些東西，但它沒有解決我的問題。我怎樣才能讓背景圖像在任何地方點擊，但在子鏈接上？

任何幫助表示讚賞。

來源

2015-10-16 Drew

請發佈您的jsfiddle。 – Alex

發生這種情況是因爲您的JavaScript僅限於div.banner-link和div.banner-link內的任何內容。如果沒有工作版本的代碼來查看（就像你看到的那樣），我們可以做的事情很少，但是如果你點擊一個圖像，你希望1個鏈接打開，如果你點擊一個按鈕，你希望打開另一個鏈接。 –

提交了一個答案，因爲我想通過在本地創建頁面來實現您想要實現的目標。 –

如果我很理解你的文章，你想讓點擊鏈接而沒有背景被點擊的權利是可能的嗎？

如果是這樣，你應該看看stopPropagation函數（這裏是文檔：http://www.w3schools.com/jquery/event_stoppropagation.asp），如果沒有，我想我誤解了。

祝您有美好的一天！

來源

2015-10-16 14:12:57

我想他想點擊圖片以及鏈接。如果他點擊圖片，它應該打開一個新標籤頁，其中隱藏字段中的鏈接。 – Snm

我需要能夠點擊子鏈接而不觸發背景圖片的點擊事件。這是我錯過的。謝謝！ – Drew

我不同意這個答案，因爲雖然它確實阻止了繼續到父項的點擊，但它並不能解決JavaScript做得比應該更多的問題。你已經編寫了javascript來處理div的任何子節點，然後阻止它通過破壞傳播來做你所要求的。 –

如果您只想在單擊圖像時打開新鏈接，則需要將點擊事件更改爲僅在單擊圖像時觸發，然後查找此父項而非此項。

$(document).ready(function() { 
    $('div.banner-link img').click(function() { 
     if ($(this).parent().find("input").length) { 
      console.log($(this).parent().find("input:first").val()); 
     } 
    }); 
});

你也許可以清理它，我改變它登錄到控制檯，因爲打開一個新窗口進行測試非常煩人。與您通過兩個不同的div提供的代碼一起工作。

編輯，有很多的話：

所以這$（本）對象將是該項目的點擊量。我們已經將元素定義爲任何div中具有banner-link類的img標籤。 $（this）成爲img對象，但我們希望然後罰款隱藏的輸入（不移動它）。要做到這一點，你做$（this）.parent（）來獲得相關的div.banner-link，如果你不這樣做，你會得到任何/所有的div.banner-link由於有多個在頁面上。現在你處於正確的位置，你可以像平常一樣繼續尋找第一個輸入並獲得它的價值。

希望這會有所幫助！

來源

2015-10-16 14:28:06

可點擊的背景div上顯示鏈接打開兩個鏈接

回答

相關問題