Не можете добавитьEventListener в тег строки? - PullRequest
Новая
       67

Не можете добавитьEventListener в тег строки?

0 голосов
/ 27 октября 2019

У меня возникли проблемы с добавлением прослушивателя событий щелчка в тег line. Слушатели событий работают хорошо для всех других тегов. Я проверил и убедился, что элемент, на который я ссылаюсь , существует , когда я пытаюсь сделать прослушиватель событий. Я также гарантировал, что я использую правильный идентификатор. Вот кодkey = "01" в данном случае. 

console.log('line-' + key);
document.getElementById("line-" + key).addEventListener("click", function () {
        console.log("tests");
});

<line class="branch" id="line-01" x1="499.46875" y1="380.109375" x2="769" y2="492" stroke="#755331" stroke-width="28.2842712474619" stroke-linecap="round"></line>

Есть идеи? Спасибо!

1 Ответ

0 голосов
/ 27 октября 2019

Когда вы делаете console.log('line-' + key); в вашем примере, вы не выходите из системы самого элемента, но id, который вы собираетесь использовать, чтобы найти его.

Возможно, что даже еслиid, который вы генерируете, действителен, элемент отсутствует на странице при вызове addEventListener. Это может иметь место, если элемент генерируется динамически. Просто попробуйте вызвать это вместо этого, чтобы проверить, действительно ли элемент существует: 

console.log(document.getElementById(`line-${ key }`));

Если вы добавите прослушиватель событий к родителю, он будет вызываться при щелчке по любым дочерним элементам, даже если они будут добавлены позже,как вы можете видеть дальше: 

function handleLineClicked({ target }) {
  if (target.tagName !== 'line') return; 

  const stroke = target.getAttribute('stroke');
  
  console.log(`Clicked element #${ target.id }`);
  
  target.setAttribute('stroke', stroke === '#755331' ? '#FF0000' : '#755331');
}

document.getElementById('svg').addEventListener('click', handleLineClicked);

// Second line added after the event listener has been added to the SVG:

const newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');

newLine.setAttribute('id', 'line2');
newLine.setAttribute('x1', '580');
newLine.setAttribute('y1', '20');
newLine.setAttribute('x2', '20');
newLine.setAttribute('y2', '140');
newLine.setAttribute('stroke', '#FF0000');
newLine.setAttribute('stroke-width', '20');
newLine.setAttribute('stroke-linecap', 'round');

document.getElementById('svg').appendChild(newLine);
.as-console-wrapper {
  max-height: 44px !important;
}
<svg height="160" width="600" id="svg">
  <line
    id="line1"
    x1="20"
    y1="20"
    x2="580"
    y2="140"
    stroke="#755331"
    stroke-width="20"
    stroke-linecap="round"
  /> 
</svg>

Другой вариант, который следует учитывать, - это то, что какой-то другой элемент в вашем SVG получает щелчок, так же, как это происходит, если вы нажимаете, когда две строки перекрываются,Второй всегда получит клик.

...