Question

在将点击事件监听器添加到line标记时遇到了一些问题。事件侦听器对于所有其他标签都工作正常。我已经测试并确保当我尝试使事件侦听器时，我引用的 does 元素存在。我还确保使用了正确的ID。这是代码。 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>

有什么想法吗？谢谢！

Answer 1

在示例中执行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中的其他元素正在获得点击，就像单击两行重叠的位置时会发生的情况一样。第二个总是会获得点击。

无法将EventListener添加到行标记？

1 个答案: