Question

简而言之，我有一个大盒子，我希望用户能够点击它。当他们点击它时，它会导航到某个URL。所以...一个链接。

（此框内部有一个链接，其中包含相应的HREF，但我希望整个框可点击）

由于几个原因，实际的锚点和盒子一样大，这对我的HTML布局来说非常麻烦，而且我在那个盒子里面有一堆块，所以我试图找到一个替代方案。

现在，我正在做的是：

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

哪个有用...有点......但它不是一个链接，你不能按Ctrl +点击它在新标签页中打开，右键点击不会给你一个很好的选项，链接，等...

我可以尝试看看当他们点击时是否按下了Ctrl，但我感觉我总是会有一些令人厌恶的东西以某种奇怪的方式或其他方式很糟糕。

有没有更好的方法来做到这一点，我错过了？

注意：我知道我可以设置一个大框的链接，通常我会这样做，但在这种情况下，它真的有问题，我不需要那样做

谢谢！丹尼尔

Answer 1

您可以随时将a元素设置为方框。使用css显示它块。 Here's a JSFiddle demo

注意：只需点击演示就不会像代码那样加载Google。 JSFiddle在这里做了一些奇怪的事情，但是如果你按Ctrl + Click它就会按预期运行。

OR！（因为你说这样做有问题）

您可以捕获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
    }
});

Answer 2

如果框相对定位，您可以创建一个绝对定位的锚作为div内的第一个元素，并将其大小设置为100％。 Example

修改 - 修复链接

Answer 3

您可以尝试这样的事情，

<强> JS

$(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()是否是跨浏览器。您可能需要考虑不同的浏览器

Answer 4

在内部锚点上尝试设置：

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

您可能还需要在父容器上设置position: relative;

请参阅JsFiddle

我怎么能有一个像锚一样的HTML元素，但不是锚？

4 个答案: