AddEventListener в SVG-файл, а не кнопка, которая делает его кликабельным

Question

Вот моя цель: я хочу, чтобы на моей странице html была кнопка, чтобы при нажатии на нее щелкали svg и svg, а при нажатии на svg на странице отображалось сообщение "clicked".

У меня есть файл html, в котором я создаю кнопку и элемент div с файлом svg:

HTML Файл

*....*

 <div>
        <p>This will be replaced <br/>
            <span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>

*....*

<br />
        <input name="button5" type="button" id="myButton5" onClick="button5_makeClickable('svgfile');" value="4. Svg clickable" />
<br />

*....*

<div>
        <object id="svgfile" data = "exemple.svg" type="image/svg+xml"> </object> 
</div>

Что Я хочу, чтобы, когда я нажимаю кнопку5, она должна сделать файл svg активным, вызываемая мной функция находится в другом файле javascript:

JS Файл

*....*

function setName(name) {
    var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
    elementHtmltoFill.innerHTML = name;
}

*....*

function button5_makeClickable(id) {
    var drawing = document.getElementById('svgfile'); 
    drawing.addEventListener('click', setName("clicked"));
}

*....*

Однако, что происходит, так это то, что «нажал» отображается, как только я нажимаю на кнопку (а не svg). Я не понимаю, почему, так как я добавляю слушателя событий к рисованию (следовательно, svg)?

Спасибо за вашу помощь!

PS: Я пытаюсь понять использование функции addEventListener, поэтому я бы предпочел, если ваша помощь использует его, пожалуйста.

Answer 1

Вы должны убедиться, что слушатель объекта svgfile находится вне функции onclick для вашей кнопки, в противном случае вы можете когда-либо щелкать объект svgfile только тогда, когда вы одновременно нажимаете на кнопку.

Answer 2

Делая setName("clicked"), вы мгновенно вызываете функцию setName вместо передачи ссылки на функцию. Вы можете решить эту задачу, передав функцию в качестве аргумента обработчика события, в котором вы вызываете setName("clicked").

function button5_makeClickable(id) {
    var drawing = document.getElementById('svgfile'); 
    drawing.addEventListener('click', function() {
      setName("clicked")
    });
}

Но ваш код в настоящее время постоянно добавляет прослушиватели событий в элемент <object>. Элемент нуждается только в прослушивателе событий одного клика.

Используйте флаг . Это логическое значение (true / false), которое действует как переключатель, чтобы делать или не делать что-то в зависимости от его значения. Добавьте прослушиватель событий к элементу <object> и проверьте в обработчике событий, установлен ли флаг true. Если это так, измените текст внутри диапазона, если это не так, ничего не делайте.

В приведенном ниже примере показано, как это может работать.

Кроме того, не используйте встроенное событие. слушатели у вас HTML. Используя addEventListener, вы должны научиться подключать обработчики событий.

var myButton5 = document.getElementById('myButton5');
var drawing = document.getElementById('svgfile');
var svgIsClickable = false;

function setName(name) {
  var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
  console.log(elementHtmltoFill)
  elementHtmltoFill.innerHTML = name;
}

function button5_makeClickable(event) {
  svgIsClickable = true;
}

myButton5.addEventListener('click', button5_makeClickable);
drawing.addEventListener('click', function() {
  if (svgIsClickable === true) {
    setName("clicked");
  }
});

object {
  display: block;
  width: 50px;
  height: 50px;
  background: gray;
}

<div>
  <p>This will be replaced <br/>
    <span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>

<br />
<input name="button5" type="button" id="myButton5" onClick="button5_makeClickable" value="4. Svg clickable" />
<br />

<div>
  <object id="svgfile" data="exemple.svg" type="image/svg+xml"> </object>
</div>