Javascript a href inside div打开新页面/选项卡

我有一个div，在这个div中有一个链接。我希望用户能够单击div中的任何地方，然后他们转到链接中的页面。链接可以更改为

/

，这并不重要。但是，存在以下条件：

我无法使用css将

标记设置为

显示：块

如果我使用onClick，我希望用户能够使用鼠标中键（或右键单击，新建选项卡）在新选项卡中打开页面，如果他们愿意的话。如果我使用onClick和javascript，我目前没有这个功能

我希望它是有效的CSS，即我不希望有

这基本上概括了我的问题。我试过四处阅读，但大多数人似乎通过onclick、display:block或放置图像来解决问题，或者强迫用户在新窗口中打开页面。我不想要这些解决方案中的任何一个，我只想要一个div作为一个普通的链接（如果可能的话）

---

非常感谢

您可以尝试用DIV包装A标签，而不是反之亦然

而不是：

<div><a>link</a></div>

链接

尝试：

链接

---

因此，可能它不是有效的标记（在HTML5之前），但事实上它现在被HTML5标准所接受似乎是事后诸葛亮，这至少是一个实现您所需的好方法。

我在过去处理这一问题的一种方法是将div包装在标记中

那么，试试这样吧

<a href="someplace"><div style="min-width: 20px; min-height: 20px;">test</div></a>

确保可以将

标记设置为

显示：块但要小心，您需要添加
高度：inherit如果不想设置固定高度

更新：
onclick事件无法处理右键单击和中键单击，但onmousedown可以！
例如：

鼠标中键/右键单击功能是浏览器与定位点交互方式的一部分，而不是代码的一部分。在代码中，您无法做任何事情来改变它的工作方式。如果改变锚点以占据整个空间（像DIV一样操作）是不可能的，我看不出您将如何以完全相同的方式来实现这一点

您可以通过使用
事件检测按下了哪个鼠标按钮，然后根据单击了哪个鼠标按钮执行不同的操作来近似此值。用户与之交互的不是浏览器界面，某些选项可能不可能，但您可以将其关闭

$('#myDiv').mousedown( function(e) {
    var href = $(this).find('a:first').attr('href');
    if (e.which == 1) {
        window.parent.location = href;
    }
    else if (e.which == 2) {
        window.open(href);
    }
    else {
        ...popup a menu with the various options...
    }
});

// prevent all clicks on the actual anchor from bubbling to the DIV handler
$('#myDiv a').click(function(e) {
     e.stopPropagation();
});

尽管它可能会工作，但这不会被认为是有效的CSS。尽管它可能会工作，但这不会被认为是有效的CSS。在HTML5中，您实际上可以这样做，但它仍然有效。这并不是说它是“有效的CSS”，而是“有效的标记”。@jamesvalid-CSS？我想你指的是HTML。或者只使用一个带显示的A标签：block和width/height就可以了。我的错误是，我当时对东西很分心，所以我写了一些毫无意义的东西。不管是哪种方式，我相信一定有一种方法看起来不那么混乱。在块标记周围有内联标记对我来说是不行的，尽管它可能会起作用，但它非常混乱。@Matt-内联包装块是无效的标记（直到HTML 5）。你向我们抛出了一堆要求，并排除了许多流行的解决方法，但是你还没有解释你为什么想要这样，或者你的最终目标是什么。如果已经加载了jQuery，我只需将
单击
绑定到
div
。因为您没有提到jQuery，所以在
中使用图像来代替
div
似乎是最合乎逻辑和语义正确的解决方案。这是因为我知道所有的解决方法，我想知道是否有“正确”的方法。我将研究jquery单击，因为我已经在我的网站上大量使用jquery。我确实在第二段提到我不想使用图像。我知道你已经说过你不想使用图像。这就是为什么我把它作为一个评论而不是一个答案。换句话说，我告诉你，这实际上是一种很好的方法，尽管你不知道为什么要排除它。再说一次，你从来没有说过“为什么”你必须这么做，所以你的答案会更加有限。你目前的分数是多少，你已经试过做什么了？出了什么问题？最简单、最合适的方法（在HTML5之前）是在
a
上使用
display:block
。问题是“我不能使用css将
标记变成
display:block
”。我不知道为什么OP不能，但它就是这么说的。@JaredFarrish我正在修改一个极其复杂的现有页面布局。这是我受到极大限制的主要原因。@James-这是一个选择器问题吗，即，你觉得你不能在不影响其他元素的情况下充分瞄准
a
元素？@JaredFarrish不，这不是选择器问题。它只是显示：块；与现有布局冲突（即使在我尝试height:inherit时），因此此方法不起作用。我来这里之前就试过了，这就是为什么我要问这个问题：）
$("a").mousedown(function(e){
    switch(e.which)
    {
        case 1: //left click
            $(this).attr("target", "_self"); //this tab
        break;
        case 2: case 3: // right and middle click
            $(this).attr("target", "_blank"); //new tab
            e.preventDefault();
        break;
    }
});

$('#myDiv').mousedown( function(e) {
    var href = $(this).find('a:first').attr('href');
    if (e.which == 1) {
        window.parent.location = href;
    }
    else if (e.which == 2) {
        window.open(href);
    }
    else {
        ...popup a menu with the various options...
    }
});

// prevent all clicks on the actual anchor from bubbling to the DIV handler
$('#myDiv a').click(function(e) {
     e.stopPropagation();
});