コンテキストメニューの[新しいタブで開く]オプションを右クリックできるようにHTMLをマークアップする適切な方法

Question

私は周りを検索しましたが、この懸念に対処しているようです。

私は次のマークアップを持っている：

<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> 

私は、Webページ上の<li>上で右クリックしてくださいしかし、私は新しいタブで開くためのオプションがありませんでした。ここのマークアップで何が問題になっていますか？

編集：私は<a>が問題を解決することをいくつかのソースで読んだことがあるが、私はアンカータグで全体<li>をラップしたくありません。これを行う方法はありますか？

注：私は新しいタブでOPENを右クリックしません。私はちょうど私がそれを右クリックすると、新しいタブで開くためのオプションを利用できるようにしたい。

Answer 1

右クリックで新しいタブを開くには、マウスのクリックイベントを確認してからリンクを開いてください。

<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 2

あなたは要素を使用する必要はありませんが、しかし、あなたは「」そのままクラスIDとCSSを残して、あなたは同じ外観を取得して感じるだろうとの一番上のdivを交換する場合「新しいタブで開く」のオプションもあります。