Как обработать клик правой кнопкой мыши по svg?

Question

[Григорий Каляшов]

Есть svg прямоугольник:

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

в html встраиваю так:

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

Подскажите, как правильно обработать клик правой кнопкой мыши по этому прямоугольнику?

Comments

[Виталий Инчин ☢]

А нет абсолютной ссылки на rectangle.svg, поэксперементировать?

[Григорий Каляшов]

@ln4in нет

Answer 1

[Алексей Зуев]

Попробуйте так

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

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

Comments

[Григорий Каляшов]

Алексей Зуев не понимаю почему, но так тоже не работает

[Алексей Зуев]

Григорий Каляшов: есть тестовая страница? я проверял у себя, у меня работало

[Алексей Зуев]

Григорий Каляшов: этот код после object вставляете?

[Григорий Каляшов]

Алексей Зуев да, после object вставил. Но всё равно событие правого клика не срабатывает. rghost.ru/8LgKlgZfb

[Алексей Зуев]

Григорий Каляшов: лучше на jsfiddle html выложите. Вы в каком браузере смотрите? Правый клик пробуете на красном квадрате?

[Алексей Зуев]

Григорий Каляшов:

[Григорий Каляшов]

Алексей Зуев браузер - Google Chrome. Да, правый клик по красному квадрату :D

[Григорий Каляшов]

Алексей Зуев странно, но попробовал в firefox и всё нормально работает

[Алексей Зуев]

Григорий Каляшов: ссылка

[Алексей Зуев]

Григорий Каляшов: я просто тестировал на локальном хосте. у меня не было file://.

[Алексей Зуев]

Григорий Каляшов: Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. Такую ошибку кидает хром по протоколу file

[Григорий Каляшов]

Алексей Зуев спасибо, теперь понял в чём в проблема)