1. дома
  2. Вопрос и ответ
  3. События SVG, которые не срабатывают/пузырятся при использовании <use> Элемент

События SVG, которые не срабатывают/пузырятся при использовании <use> Элемент

2014-06-06 4 views
28

Я столкнулся с интересной ошибкой (?), В которой, если вы вставляете SVG, используя < use> как часть ссылки (например, значок) - сама иконка не регистрировать событие click в jQuery, но нажатие на текст делает. Я думаю, это связано с тем, что события SVG не бурлили?События SVG, которые не срабатывают/пузырятся при использовании <use> Элемент

Если вы встроили SVG напрямую, эта связь запускается независимо от того, нажимаете ли вы текст или значок.

Простой тестовый чехол, который я создал, можно посмотреть здесь: SVG <use> bug test case.

источник

2014-06-06 Paul Thomas

+0

Интересно, что он срабатывает, если вы используете $ ('. Element'). Click (function() {...}), а не $ (document) .on ('click', '.element', function() {...}); –

+2

Я сообщил https://code.google.com/p/chromium/issues/detail?id=382872 для Blink (Chrome/Opera). –

+1

У меня такая же проблема, когда svg встроен как – fuzzyvagina

ответ

36

Использование pointer-events: none; на svg. Это сработало для меня.

Этот элемент никогда не является объектом событий мыши; однако события мыши могут указывать на его дочерние элементы, если у этих потомков есть указатель-события, установленные на какое-то другое значение. В этих обстоятельствах события мыши вызовут прослушиватели событий на этом родительском элементе как , соответствующие по пути в/из потомка во время события фазы захвата/пузыря.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

источник

2014-11-17 00:09:28

+0

Спасибо @Omar, это умный трюк! Я думаю, что теперь это исправлено в Chrome, и с тех пор я не сталкивался с этим. Но если я это сделаю, я обязательно буду иметь это в виду. Может быть полезно и для других вопросов. –

+0

Мое удовольствие. Я столкнулся с проблемой с Safari. –

+2

Хороший ответ. Я также обнаружил, что при встраивании SVG с использованием объекта объявление CSS, которое вы упомянули, должно применяться к объекту, а не к SVG. –

4

У меня была та же проблема. Исправление, которое я использую, - это просто установить прозрачный div над svg. Но это, конечно, не идеально.

источник

2014-09-09 12:41:45

0

У меня была такая же проблема, и я использовал display: block или display: inline-block по ссылке, и она работала.

источник

2018-01-25 15:32:09

 Смежные вопросы

  • Нет связанных вопросов^_^