Создайте определенное меню, щелкнув правой кнопкой мыши по опции выбора html.

Question

Мне нужно было бы создать html select, где, если выбрана опция, щелкнув правую кнопку, появится новое всплывающее окно с некоторыми параметрами. Важно, чтобы параметры не были скрыты, когда пользователь нажимает на правую кнопку (поэтому я не могу использовать onchange или onclick).

Я также попытался использовать onclick для опций, но не работает в Chrome.

Любая идея? Спасибо!

Answer 1

Вы попробовали oncontextmenu?
Предполагая element является элементом, который будет правильно щелкнул:

document.body.addEventListener('click', function() { 
 
    document.getElementById("rightclicked").style.display = "none"; 
 
}) 
 
document.body.addEventListener('contextmenu', function() { 
 
    document.getElementById("rightclicked").style.display = "none"; 
 
}) 
 
document.getElementById("element").addEventListener('contextmenu', function(ev) { 
 
    ev.stopPropagation(); 
 
    ev.preventDefault(); 
 
    rightclick(); 
 
    return false; 
 
}, false); 
 

 
function rightclick() { 
 
    var e = window.event; 
 
    var cantThinkOfAName = document.getElementById("rightclicked"); 
 
    cantThinkOfAName.style.display = "block"; 
 
    cantThinkOfAName.style.left = e.clientX + "px"; 
 
    cantThinkOfAName.style.top = e.clientY + "px"; 
 
}

<div id="element">right click</div> 
 
<div id="rightclicked" style="background-color: rgb(200, 200, 200);z-index: 100000; width:150px;height: auto; position: absolute; display: none;"> 
 
    <ul style="margin: 0px; padding: 0px; text-align: center; list-style-type: none; text-indent: 0px"> 
 
    <a href="#"> 
 
     <li style="border-top: none; margin-top: -1px"> 
 
     <p>Item1</p> 
 
     </li> 
 
    </a> 
 
    <a href="#"> 
 
     <li> 
 
     <p>Item2</p> 
 
     </li> 
 
    </a> 
 
    <a href="#"> 
 
     <li> 
 
     <p>Item3</p> 
 
     </li> 
 
    </a> 
 
    <a href="#"> 
 
     <li style="margin-bottom: 1px;"> 
 
     <p>Item4</p> 
 
     </li> 
 
    </a> 
 
    </ul> 
 
</div>