javascript - SVG Elements 上的事件委托(delegate)

Question

我试图为我附加到 SVG Canvas 的所有元素提供一个通用的单击处理程序。但我无法将处理程序委托(delegate)给新创建的元素。

这是我尝试委托(delegate)的代码，但没有成功

$("#floor").on('click','.drawnLine', function() {
    //#floor is the SVG Element
    //.drawnLine is the <line> element that is added dynamically
    console.log($(this).data('index'));
});

更新:关于.on()的jQuery手册据说

Note: Delegated events do not work for SVG.

现在的问题是这个问题还有其他解决方法吗？

Answer 1

当 jQuery 无法使用 SVG 时，您可以使用 vanilla js。幸运的是，每个支持 svg 的浏览器也支持事件监听器。纯js委托(delegate)事件也没那么难看:

$("#floor")[0].addEventListener('click', function(e) {
  // do nothing if the target does not have the class drawnLine
  if (!e.target.classList.contains("drawnLine")) return;
  console.log($(this).data('index'));
});

但您也可以创建自己的函数来更干净地委托(delegate)事件。