javascript - 我怎样才能拥有一个表现得像 anchor 但又不是 anchor 的 HTML 元素？

Question

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

(此框内部确实有一个与相应 HREF 的链接，但我希望整个框都可以点击)

出于多种原因，让实际的 anchor 与盒子一样大对我的 HTML 布局来说真的很困惑，而且我在那个盒子里有一堆 block 等等，所以我试图找到一个替代方案。

现在，我正在做的是:

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

哪个有效...有点...但它不完全是一个链接，您不能 Ctrl+单击它以在新选项卡中打开它，右键单击不会为您提供通过链接获得的不错的选项，等等……

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

是否有我缺少的更好的方法？

注意:我知道我可以将链接样式设置为一个大盒子，通常我会这样做，但在这种情况下，确实有问题，我不需要这样做

谢谢!
丹尼尔

Answer 1

您总是可以将 a 元素设为框。使用 css block 显示它。 Here's a JSFiddle demo .

注意:仅单击演示并不会像代码看起来那样加载 Google。 JSFiddle 在这里做了一些奇怪的事情，但如果你按住 Ctrl 并单击它，它就会按预期运行。

或者! (因为你说这样做有问题)

您可以捕获 click 和 contextmenu 事件，找出触发了哪个事件并根据该事件更改操作。您可以使用类似于 this demo 的代码来完成此操作.

您要附加到 anchor 的 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
    }
});​