模拟Javascript / jQuery中的链接点击，产生正常的浏览器行为

Question

现在，我有以下代码：

<script> 
$("#clickme").click(function(){
    $("#clicker").click();
}); 
</script>
<div id="clickme" style="height:20em; width:20em;">
    <a id="clicker" href="http://www.google.com"> Link </a>
</div>

实际上，如果您单击背景div上的任意位置，Javascript将模拟实际链接上的单击并将您带到目标页面。

但是，当您尝试按住Ctrl键单击时，这不能很好地工作，因为浏览器不会打开新选项卡，而只是将URL加载到当前窗口中。

而不是这种行为，我希望在单击背景时具有正常的浏览器行为（即，打开新选项卡，不要更改当前窗口以进行按住Ctrl键单击）。 有没有办法在Javascript / jQuery中执行此操作？

我宁愿不尝试检测“ctrl”键被抑制 - 有一些类似的情况，我宁愿有一个解决方案来解决所有问题而不是试图抓住这样的每个边缘情况。

Answer 1

一个会执行此操作的功能（新窗口或制表符，无法控制哪个）...

function open_url(url ) {
    if (flag) {
        window.open(url, '_blank');
        window.focus();
    } else {
        window.location.href = url;
    }
}

当然，您必须捕获Ctrl按键...

$(window).keypress(function(event) {
    if (event.ctrlKey) {
        // set flag
        flag = true;
    } else {
        // unset flag
        flag = false;
    }
});

Answer 2

我知道这不是javascript，但我认为一个好的解决方案是使用绝对定位的链接并将其z-index设置为负数，以便点击div的内容不会转到链接。 （除非只是忽略z-index，否则不要这么做）然后单击div的背景就像常规链接一样。 看到这个小提琴

这是HTML

<div id="clickme"><a id="clicker" href="http://suu.edu"></a><p>text  text</p></div>

和CSS

#clickme{
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  z-index: 1;
}

#clicker{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

如果您不希望它看起来像div是链接，您可以使用css更改cursor 。