Как сделать svg <circle> clickable

-4

As title! Я хочу, чтобы <circle> можно использовать javascript onclick событие или JQuery. Но я не знаю, как это сделать?
Как сделать svg <circle> clickable

Here's my code

Спасибо!

источник

2015-11-18 Liou Jay

вы уже написали нажмите event.what, что вы хотите. –

@JaromandaX Я получаю предупреждение даже в jsbin.com. В чем проблема. –

Извините, парень, я подумал, что меня щелкнули. «Автозапуск js» он должен быть запущен. –

Как я уже отмечал выше, ваш код работает нормально, в нем нет никаких проблем.

Способ получения события щелчка по кругу с использованием jquery can be done like this. Вы должны avoid с использованием inline событий. read here

$('circle').on("click",function(){ 
 
    console.log($(this).attr("cy"));//30 
 
test();//your function getting called on click of circle. 
 
    })


 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>My Circle</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
 
</head> 
 
<body> 
 
<svg height='600' width='820'> 
 
    
 
<script> 
 
    function test(){ 
 
    alert("yyyy"); 
 
    } 
 
</script> 
 
    
 
<circle cx="20" cy="30" fill="black" r="20"></circle> 
 
</svg> 
 
</body> 
 
</html>

источник

2015-11-18 04:10:34

Ваш код прекрасно работает на моем Chrome, но не на Firefox. Итак, просто добавьте в конец вашего предупреждения двоеточие ;. Измените его на: alert("yyyy");

Update:

Код штрафа на jsbin. Она не работает, пока не будет нажата кнопка Выполнить с JS

источник

2015-11-18 04:14:34 User528491

и вы протестировали это на jsbin.com? –

@JaromandaX Да, он работает на jsbin – User528491

, так что все, что вы сделали, это добавить ';' и это заставило его работать в firefox? интересно, как я это сделал, и он делает все разницу –

Попробуйте этот

HTML

<svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id='circ' /> 
</svg>

$(document).ready(function(){ 
    $('#circ').click(function(){ 
     alert('clicked') ; 
    }); 
});

источник

2015-11-18 04:19:24

Вот ваш EXACT код в фрагмент НЕ в jsbin.com

Он работает

Других ответов действительно есть советы о том, как использовать JQuery, если вы хотите идти по этому пути

Я бы порекомендовал JQuery по сравнению с использованием OnClick атрибута, гораздо более гибкий

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<svg height='600' width='820'> 
 
    
 
<script> 
 
    function test(){ 
 
    alert("yyyy") 
 
    } 
 
</script> 
 
    
 
<circle onclick="test()" cx="20" cy="30" fill="black" r="20"></circle> 
 
</svg> 
 
</body> 
 
</html>

источник

2015-11-18 04:21:25

Это полезно. +1 – Alex

Я нашел вашу проблему просто отметьте Auto-run js в output окно в jsbin.

Или вы можете нажать

Запуск с JS

источник

2015-11-18 04:24:12 Alex

даже отмеченный галочкой не всегда автоматический запуск: p –

@JaromandaX Каков твой браузер? Включен ли javascript? – Alex

firefox 44/42, chrome 46, IE11, Edge 13 - выбирайте –

Как сделать svg <circle> clickable

ответ

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