Question

我有一个div，我在这个div里面有一个链接。我希望用户能够点击div中的任意位置，然后转到链接中的页面。该链接可以更改为<span>/<p>，这并不重要。但是有以下条件：

我无法使用css将<a>标记转换为display: block;
如果我使用onClick，我希望用户能够使用鼠标中键（或右键单击，新选项卡），如果他们愿意，可以在新选项卡中打开页面。如果我使用onClick和javascript，我目前没有此功能。
我希望它是有效的CSS，即我不想拥有<a><div> .... </div></a>

这几乎总结了我的问题。我尝试过阅读，但大多数人似乎用onclick，display：block或put images或强制用户在新窗口中打开页面来解决问题。我不想要任何这些解决方案，我只想让div作为普通链接工作（如果可能的话）。

非常感谢

Answer 1

你可以尝试用你的DIV包装A标签而不是反之亦然。

而不是：

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

尝试：

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

所以，也许它不是有效的标记（在HTML5之前），但HTML5标准现在可以接受的事实看起来很明显，这至少是一种良好的方式来实现你所需要的。

Answer 2

鼠标中键/右键单击功能是浏览器与锚点交互的一部分，而不是代码的一部分。您无法在代码中执行任何操作以使其工作不同。如果改变锚点占据整个空间（就像DIV一样）是不可能的，我不会看到你将如何以完全相同的方式做到这一点。

您可以通过检测用event.which按下哪个鼠标按钮并根据单击的鼠标按钮执行不同的操作来近似它。它不是用户正在与之交互的浏览器界面，有些选项可能无法实现，但您可以将其关闭。

$('#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();
});

Answer 3

我过去接触过的一种方法是将div包装在标签内。

所以，试试这样的事情

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

Answer 4

当然，您可以将<a>代码添加到display: block;，但如果您不想设置固定的高度，请务必添加height: inherit;

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

$("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;
    }
});

div内的一个href打开一个新的页面/标签

4 个答案: