我怎樣纔能有一個行爲像一個錨點，但不是一個錨點的HTML元素？

總之，我有一個大盒子，我希望用戶能夠點擊。當他們點擊它時，它會導航到某個URL。所以...一個鏈接。我怎樣纔能有一個行爲像一個錨點，但不是一個錨點的HTML元素？

（這個箱子確實有相應的HREF內的鏈接，但我想整個盒子是點擊）

由於多種原因，使實際錨那樣大盒子是真的很亂到我的HTML佈局，再加上我有一堆塊內的盒子等，所以我試圖尋找替代品。

現在，我在做什麼是：

$(box).click(function(){ 
    window.location.href = $(this).find("a.lnkWhatever").attr("href"); 
});

哪個...作品有點兒......但它並不完全是鏈接，你不能按Ctrl +雙擊它，在一個新開點擊右鍵不會給你很好的選擇，你會得到一個鏈接，等等...

我可能試試看看是否按Ctrl時，他們點擊，但我感覺我'米總會有一些可憎的作品在一些奇怪的方式或另一種...

有沒有更好的方法來做到這一點，我失蹤了？

注：我知道我可以風格的鏈接是一個大箱子，通常我會做，但在這種情況下，它是真的問題，我需要那樣做

謝謝！
丹尼爾

來源

2012-09-20 Daniel Magliola

你能不換圍繞這個「盒子」的'a'元素？ – Oded

我會用標籤包裝盒子。要符合HTML，您需要將塊級元素內部轉換爲內聯級元素，並將其樣式設置爲顯示：block ... –

是的，這是我試圖避免的原因。任何其他的選擇？ –

你總是可以使a元素的框。使用CSS來顯示它的塊。 Here's a JSFiddle demo。

注意：只需單擊該演示程序，不會像代碼那樣加載Google。 JSFiddle在這裏做了一些奇怪的事情，但如果按Ctrl +單擊它，它的行爲將與預期相同。

或！（因爲您說這樣做有問題）

您可以捕獲click和contextmenu事件，找出哪些事件已觸發並根據該事件更改操作。您可以使用一些看起來像this demo的代碼來完成此操作。

中的JavaScript，你會附加到錨應該是這樣的：

$('a').on('click contextmenu', function (event) { 
    if (event.type === 'contextmenu') { 
     //execute what code you want 
    } 
    else { 
     // this would automatically navigate to your link 
     // so you could theoretically leave off the else portion 
     // it just seemed like a nice place to leave this explanation 
    } 
});

來源

2012-09-20 16:09:40 jasonmerino

如果框相對定位，你可以創建一個絕對定位錨的DIV中的第一個元素，並調整其大小到100％。Example

編輯 - 固定鏈接

來源

2012-09-20 16:16:50 Bubbles

你可以嘗試這樣的事情，

$(document).ready(function() { 
    $('#mydiv').click(function(e) { 
     var a = $(this).find('a'); 
     if (e.ctrlKey) { 
      a.attr('target', '_blank'); 
     } 
     a[0].click(); 
    }); 
})

HTML

<div id='mydiv'> 
     hi world <br /> 
     <a href='http://www.google.com'>Google</a> 
     Hello <br /> 
     blah 
    </div>

Demo

但是我不確定.click()是否是跨瀏覽器。您可能需要考慮不同的瀏覽器

來源

2012-09-20 16:35:15 Jashwant

jQuery的原因之一是它的摘要是很多瀏覽器特定的東西。所以，是的點擊是交叉的。雖然_that_是瀏覽器專用的，但不能保證它用於附加事件的機制 – Basic

@Basic，jQuery的'click（）'是'jQuery'對象的函數。我正在使用javascript對象（請參閱'a [0]'）。 jQuery的'click（）'不是真正的點擊事件。它模擬它，因此，它不會導航到其他頁面。 – Jashwant

我乞求你的赦免，我撇去，看到jQuery點擊並評論 - 你說得很對，我的錯誤。 – Basic

在內部錨嘗試設置：

display: block; 
width: 100%; 
height: 100%;

也許你可能還需要設置position: relative;在父容器

見JsFiddle

來源

2015-04-30 11:42:39 Seven

我怎樣纔能有一個行爲像一個錨點，但不是一個錨點的HTML元素？

回答

相關問題