Question

我正在尝试为我附加到SVG画布的所有元素设置一个公共点击处理程序。但我无法将处理程序委托给新创建的元素。

这是我试图委托的代码，但没有运气

$("#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手册中，提到了

注意：委派事件不适用于SVG。

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

Answer 1

当jQuery失败并使用SVG时，您可以使用vanilla js。幸运的是，每个支持svg的浏览器也支持事件监听器。纯粹的js委托事件并不那么难看：

$("#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'));
});

但您也可以创建自己的功能，以更干净地委派您的活动。

Answer 2

TL / DR：将事件监听器附加到非SVG父元素。

jQuery文档中的注释有些误导。

委派事件不适用于SVG。

应该是......

当侦听器附加到 SVG时，委派事件无效。

当事件监听器附加到SVG元素时，jQuery的事件委托不起作用;但是，如果您将侦听器附加到SVG的非SVG父级，则事件传播将按预期工作，并且任何与SVG元素匹配的选择器都将触发您的事件处理函数。

将侦听器附加到SVG元素将不工作：

$("#floor").on('click','.drawnLine', function() { console.log($(this).data('index')); });

但是将它附加到父元素将起作用：

$(document.body).on('click','#floor .drawnLine', function() { console.log($(this).data('index')); });

注意：我注意到的一个怪癖是，如果事件目标是SVG元素，则事件不会一直冒泡到iOS上的document.body。因此，如果您希望iOS用户能够触发您的处理程序功能，您需要将事件监听器附加到其间的某个元素（例如SVG所在的div元素）。

SVG Elements上的事件委派

2 个答案: