How to handle right click on svg?

Question

css

I have a svg rectangle:

<svg version="1.1" 
    viewBox="0 0 200 100" 
    preserveAspectRatio="xMidYMid meet" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    xmlns="http://www.w3.org/2000/svg">
  
    <rect id="rect1" class="rct" x="10" y="10" width="80" height="80" rx="20" ry="20" fill="red"   />
</svg>

embed in html like this:

<object id="svg" type="image/svg+xml" data="rectangle.svg" width = "200" height = "200"></object>

Can you tell me how to properly handle a right-click on this rectangle?

Answer 1

Try like this

document.getElementById('svg').onload = function() {
  var svgDoc = this.contentDocument,
    rect = svgDoc.getElementById('rect1');

  rect.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    alert('На меня тычат правой кнопкой мыши!');
  });
};