标记 HTML 以允许右键单击上下文菜单中的“在新选项卡中打开”选项的正确方法

Question

I have searched around but no question seems to address this concern.

I have the following markup:

<li>
  <div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
    <div class="boxInner-item">
            <div class="triangle-topright-cover"></div>
      <div class="triangle-topright-red"></div>
      <div class="label-limitedsets">LIMITED SETS</div>
      <img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
      <div class="ui content">
                <div class="productbrand">TECNO</div>
        <div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
        <div class="price">
          <div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
          <div class="usualprice">U.P. $588.00</div>
        </div>
      </div>
    </div>
  </div>
</li>

However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?

Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?

Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.

Answer 1

虽然您不想使用该元素，但如果您将最上面的 div 替换为“a”，而保持类 ID 和 css 不变，您也将获得与“在新标签页中打开”选项相同的外观。

Answer 2

To Open in new tab on right click first we need to check the mouse click event and then open the link.

<div id="open">open</div>

$('#open').mousedown(function(event) {
if(event.which == 3) {        //Right click event
   window.open('http://google.com','_newtab'); // To open in new tab
} else{
   alert('Please Right click to open');
}});

Working Code Pen

Answer 3

为此，您需要使用<a>标签并将href属性传递给标签