首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >SVG元素上的事件委托

SVG元素上的事件委托
EN

Stack Overflow用户
提问于 2013-01-21 09:31:44
回答 2查看 4.9K关注 0票数 19

我正在尝试为要添加到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。

那么现在的问题是这个问题有没有其他的变通办法?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-01-21 22:37:34

当jQuery使用SVG失败时,您可以使用普通的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'));
});

但您也可以创建自己的函数来更清晰地委派事件。

票数 13
EN

Stack Overflow用户

发布于 2015-03-17 22:35:17

SVG/DR:将事件侦听器附加到非父元素。

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元素)。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14431361

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档