SVG image not getting passed to a function in an onclick event
Question
I have an svg that has an onclick event but whenever it is clicked the event.target is a path that has been clicked not the whole svg , why is that? Is this how svg's work? Here is my code.
In my Js I console.log() the svg when ever it is clicked, you can inspect that but what you get isnt the whole svg rather the path (some part) that has been clicked
let svg = document.body.querySelector('.notebook'); svg.addEventListener("click",openHome) let div2 = document.body.querySelector('.div2') function openHome(event){ console.log(event.target) div2.innerText= event.target; }
<!DOCTYPE html> <html lang="en"> <head> <head> <body> <svg class="notebook" fill="none" viewBox="0 0 176 227" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#a)"> <path d="m173.58 0.18188h-162.68v226.21h162.68c0.585 0 1.145-0.232 1.558-0.645 0.414-0.413 0.646-0.974 0.646-1.558v-221.8c0-0.58435-0.232-1.1448-0.646-1.558-0.413-0.4132-0.973-0.64534-1.558-0.64535zm-153.5 219.96c-0.7989 0-1.5799-0.237-2.2441-0.68-0.6643-0.444-1.1821-1.075-1.4878-1.813s-0.3857-1.55-0.2299-2.334c0.1559-0.784 0.5406-1.503 1.1055-2.068 0.565-0.565 1.2847-0.95 2.0683-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.074-1.4878-1.812c-0.3057-0.739-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.069 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.055-0.3075 1.546-0.203 0.49-0.5005 0.935-0.8756 1.31s-0.8204 0.673-1.3105 0.876-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.105 0.7836-0.156 1.5958-0.076 2.3339 0.229 0.7381 0.306 1.3689 0.824 1.8128 1.488 0.4439 0.665 0.6808 1.445 0.6808 2.244 0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.784 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.824 1.8128 1.488 0.6808 1.445 0.6808 2.244c0 0.531-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.308-1.5459 0.308zm0-20.565c-0.7989 0-1.5798-0.237-2.2441-0.681-0.6643-0.443-1.182-1.074-1.4878-1.812-0.3057-0.738-0.3857-1.551-0.2298-2.334 0.1558-0.784 0.5405-1.504 1.1055-2.068 0.5649-0.565 1.2846-0.95 2.0682-1.106s1.5958-0.076 2.3339 0.23 1.3689 0.823 1.8128 1.488c0.4439 0.664 0.6808 1.445 0.6808 2.244 0 0.53-0.1045 1.056-0.3075 1.546s-0.5006 0.935-0.8756 1.31c-0.3751 0.375-0.8204 0.673-1.3105 0.876s-1.0154 0.307-1.5459 0.307zm0-20.564c-0.7989 0-1.5798-0.237-2.2441-0.681s-1.182-1.075-1.4878-1.813c-0.3057-0.738-0.3857-1.55-0.2298-2.334 0.1558-0.783 0.5405-1.503 1.1055-2.068 0.5649-0.565 1.2846-0.949 2.0682-1.105s1.5958-0.076 2.3339 0.23c0.7381 0.305 1.3689 0.823 1.8128 1.487 0.4439 0.665 0.6808 1.446 0.6808 2.245 0 0.53-0.1045 1.055-0.3075 1.545s-0.5006 0.936-0.8756 1.311c-0.3751 0.375-0.8204 0.672-1.3105 0.875s-1.0154 0.308-1.5459 0.308zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8234 1.8128 1.4877 0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0557-0.3075 1.5458s-0.5006 0.9354-0.8756 1.3105c-0.3751 0.3751-0.8204 0.6726-1.3105 0.8756s-1.0154 0.3075-1.5459 0.3075zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4877c0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5798-0.2369-2.2441-0.6807-0.6643-0.4439-1.182-1.0748-1.4878-1.8129-0.3057-0.7381-0.3857-1.5503-0.2298-2.3338 0.1558-0.7836 0.5405-1.5034 1.1055-2.0683 0.5649-0.5649 1.2846-0.9496 2.0682-1.1055 0.7836-0.1558 1.5958-0.0758 2.3339 0.2299s1.3689 0.8235 1.8128 1.4878c0.4439 0.6642 0.6808 1.4452 0.6808 2.2441 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 0-1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8129-0.3057-0.7381-0.3857-1.5502-0.2299-2.3338 0.1559-0.7836 0.5406-1.5034 1.1055-2.0683 0.565-0.5649 1.2847-0.9496 2.0683-1.1055 0.7836-0.1558 1.5958-0.0759 2.3339 0.2299 0.7381 0.3057 1.3689 0.8235 1.8128 1.4877 0.4439 0.6643 0.6808 1.4453 0.6808 2.2442 0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3074-1.5459 0.3074zm0-20.564c-0.7989 1e-4 -1.5799-0.2369-2.2441-0.6807-0.6643-0.4439-1.1821-1.0747-1.4878-1.8128s-0.3857-1.5503-0.2299-2.3339c0.1559-0.78357 0.5406-1.5033 1.1055-2.0682 0.565-0.56493 1.2847-0.94965 2.0683-1.1055s1.5958-0.07587 2.3339 0.22986c0.7381 0.30574 1.3689 0.82348 1.8128 1.4878s0.6808 1.4453 0.6808 2.2442c0 0.5305-0.1045 1.0558-0.3075 1.5458-0.203 0.4901-0.5006 0.9354-0.8756 1.3105-0.3751 0.3751-0.8204 0.6727-1.3105 0.8757s-1.0154 0.3075-1.5459 0.3074z" fill="#3F3D56"/> <path d="m10.901 12.667c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7846 9.5594-1.8361 10.649-1.8361v0.73444c-5.6304 0-9.2812 0.63024-9.8692 1.1016 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0984-0.2856-0.2018-1.4525-0.6246-4.5823-0.89514l0.0632-0.73157c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/> <path d="m10.901 32.865c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6303 0-9.2811 0.6303-9.8691 1.1017 0.58794 0.4714 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0985-0.2857-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/> <path d="m10.901 53.429c-1.09 0-10.649-0.0514-10.649-1.8361s9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1017 9.8692 1.1017 5.6178 0 9.2648-0.6276 9.865-1.0985-0.2856-0.2017-1.4525-0.6245-4.5823-0.8951l0.0632-0.7315c5.3034 0.4583 5.3034 1.3048 5.3034 1.6234 0 1.7847-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/> <path d="m10.901 73.993c-1.09 0-10.649-0.0515-10.649-1.8362 0-1.7846 9.5594-1.8361 10.649-1.8361v0.7345c-5.6303 0-9.2811 0.6302-9.8691 1.1016 0.58794 0.4715 4.2388 1.1017 9.8691 1.1017 5.6178 0 9.2649-0.6276 9.8651-1.0984-0.2857-0.2017-1.4525-0.6246-4.5823-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5594 1.8361-10.649 1.8361z" fill="#2F2E41"/> <path d="m10.901 94.558c-1.09 0-10.649-0.0515-10.649-1.8361 0-1.7847 9.5594-1.8361 10.649-1.8361v0.7344c-5.6304 0-9.2812 0.6303-9.8692 1.1017 0.58794 0.4714 4.2388 1.1016 9.8692 1.1016 5.6178 0 9.2648-0.6276 9.8651-1.0984-0.2857-0.2017-1.4526-0.6245-4.5824-0.8951l0.0632-0.7316c5.3034 0.4583 5.3034 1.3048 5.3034 1.6235 0 1.7846-9.5593 1.8361-10.649 1.8361z" fill="#2F2E41"/> <path d="m10.901 115.12c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.837 10.649-1.837v0.735c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/> <path d="m10.901 135.69c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/> <path d="m10.901 156.25c-1.09 0-10.649-0.051-10.649-1.836 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58795 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.8651-1.099-0.2857-0.201-1.4525-0.624-4.5824-0.895l0.0632-0.731c5.3035 0.458 5.3035 1.305 5.3035 1.623 0 1.785-9.5594 1.836-10.649 1.836z" fill="#2F2E41"/> <path d="m10.901 176.82c-1.09 0-10.649-0.052-10.649-1.837 0-1.784 9.5594-1.836 10.649-1.836v0.735c-5.6304 0-9.2812 0.63-9.8692 1.101 0.58794 0.472 4.2388 1.102 9.8692 1.102 5.6178 0 9.2648-0.628 9.865-1.098-0.2856-0.202-1.4525-0.625-4.5823-0.895l0.0632-0.732c5.3034 0.458 5.3034 1.305 5.3034 1.623 0 1.785-9.5593 1.837-10.649 1.837z" fill="#2F2E41"/> <path d="m10.901 197.38c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.8651-1.098-0.2857-0.202-1.4526-0.624-4.5824-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/> <path d="m10.901 217.94c-1.09 0-10.649-0.052-10.649-1.836 0-1.785 9.5594-1.836 10.649-1.836v0.734c-5.6304 0-9.2812 0.63-9.8692 1.102 0.58794 0.471 4.2388 1.101 9.8692 1.101 5.6178 0 9.2648-0.627 9.865-1.098-0.2856-0.202-1.4525-0.624-4.5823-0.895l0.0632-0.732c5.3034 0.459 5.3034 1.305 5.3034 1.624 0 1.784-9.5593 1.836-10.649 1.836z" fill="#2F2E41"/> <path d="m141.33 71.242h-87.765c-0.6875-4e-4 -1.3465-0.1453-1.8327-0.403-0.4861-0.2577-0.7595-0.607-0.7603-0.9714v-18.185c8e-4 -0.3645 0.2742-0.7138 0.7603-0.9715 0.4862-0.2577 1.1452-0.4026 1.8327-0.403h87.765c0.688 4e-4 1.347 0.1453 1.833 0.403s0.76 0.607 0.76 0.9715v18.185c0 0.3644-0.274 0.7137-0.76 0.9714s-1.145 0.4026-1.833 0.403z" fill="#fff"/> <g clip-path="url(#clip1)"> <path d="m150.92 159.82c0.01 7.675-1.544 15.272-4.566 22.327l-0.188 0.432c-5.113 11.632-13.978 21.212-25.178 27.211-11.201 5.998-24.089 8.067-36.604 5.877-0.3406-0.061-0.6805-0.123-1.0199-0.188-3.507-0.68-6.9411-1.693-10.256-3.025-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7246-0.321-1.0836-0.488-9.8198-4.551-18.134-11.815-23.962-20.935s-8.9281-19.716-8.9339-30.539c0-31.313 25.385-56.697 56.697-56.697 31.313 0 56.698 25.384 56.698 56.697z" fill="#2F2E41"/> <path d="m84.379 215.66c-0.3405-0.061-0.6805-0.123-1.0199-0.188-0.2214-6.426-0.9813-19.616-3.5729-33.43-1.4175-7.56-3.3851-15.31-6.1143-22.237-0.935-2.397-2.0029-4.741-3.1989-7.019-2.7577-5.208-6.1025-9.593-10.158-12.564l0.5972-0.815c3.3733 2.473 6.405 5.944 9.095 10.414 0.8069 1.338 1.5818 2.766 2.3249 4.284 0.7968 1.624 1.5567 3.347 2.2797 5.171 0.4613 1.161 0.9069 2.362 1.3369 3.603 1.872 5.39 3.4633 11.539 4.774 18.449 0.2902 1.526 0.5664 3.09 0.8286 4.692 2.0314 12.408 2.6437 23.879 2.8282 29.64z" fill="#07C5AE" opacity=".2"/> <path d="m71.5 211.78c-0.3623-0.158-0.7247-0.321-1.0836-0.488-0.3506-3.808-0.9947-8.532-2.1723-13.016-0.5158-2.013-1.1779-3.987-1.9811-5.904-1.3436-3.145-3.0831-5.819-5.3326-7.468l0.5972-0.814c2.3551 1.725 4.1718 4.451 5.5758 7.639 1.5819 3.593 2.637 7.775 3.3398 11.771 0.5217 2.967 0.8505 5.834 1.0568 8.28z" fill="#07C5AE" opacity=".2"/> <path d="m54.674 140.2c2.7874 0 5.0471-2.26 5.0471-5.047 0-2.788-2.2597-5.047-5.0471-5.047-2.7875 0-5.0472 2.259-5.0472 5.047 0 2.787 2.2597 5.047 5.0472 5.047z" fill="#07C5AE" opacity=".2"/> <path d="m56.299 183.65c2.7875 0 5.0472-2.26 5.0472-5.047 0-2.788-2.2597-5.047-5.0472-5.047-2.7874 0-5.0471 2.259-5.0471 5.047 0 2.787 2.2597 5.047 5.0471 5.047z" fill="#07C5AE" opacity=".2"/> <path d="m74.711 143.63c-1.0702 6.039 1.2924 11.506 1.2924 11.506s4.098-4.322 5.1683-10.36c1.0702-6.039-1.2924-11.506-1.2924-11.506s-4.098 4.322-5.1683 10.36z" fill="#07C5AE" opacity=".2"/> <path d="m57.937 157.97c5.7595 2.106 11.547 0.754 11.547 0.754s-3.5505-4.766-9.31-6.872-11.547-0.754-11.547-0.754 3.5505 4.766 9.3099 6.872z" fill="#07C5AE" opacity=".2"/> <path d="m56.961 196.44c4.037 1.476 8.0992 0.513 8.0992 0.513s-2.4828-3.356-6.5198-4.832c-4.0369-1.477-8.0992-0.514-8.0992-0.514s2.4829 3.357 6.5198 4.833z" fill="#07C5AE" opacity=".2"/> <path d="m94.101 172.37c12.207 0 22.104-9.896 22.104-22.104 0-12.207-9.897-22.103-22.104-22.103-12.208 0-22.104 9.896-22.104 22.103 0 12.208 9.8961 22.104 22.104 22.104z" fill="#A0616A"/> <path d="m85.467 167.19s2.763 13.124 2.763 14.505c0 1.382 13.124 7.598 13.124 7.598l11.742-2.072 4.145-12.433s-6.908-10.361-6.908-14.506l-24.866 6.908z" fill="#A0616A"/> <path d="m146.35 182.14-0.188 0.433c-5.113 11.631-13.978 21.212-25.178 27.21s-24.089 8.067-36.604 5.877c-0.3405-0.06-0.6804-0.123-1.0198-0.188-3.507-0.68-6.9412-1.693-10.256-3.024-0.5385-0.217-1.073-0.441-1.6036-0.673-0.3624-0.158-0.7247-0.32-1.0837-0.488-3.2537-1.508-6.3569-3.321-9.2678-5.415l-2.6201-7.6 1.4727-1.124 6.2619-4.781 0.8404-0.642 12.683-9.682 0.936-0.715 6.5923-5.032 0.0017-2e-3s7.1291 11.616 17.49 8.162c10.362-3.453 10.135-13.357 10.135-13.357l31.407 11.041z" fill="#3A3768"/> <path d="m74.933 132.46s7.0179-15.205 20.469-11.697c13.45 3.509 21.054 8.773 21.638 14.036s-0.293 13.158-0.293 13.158-1.462-10.819-10.819-8.479c-9.3569 2.339-23.977 0.584-23.977 0.584l-2.3393 21.054s-2.6317-3.802-5.5558-1.462c-2.9241 2.339-8.4798-22.516 0.8772-27.194z" fill="#3A3768"/> <path d="m73.104 212.45c-0.5384-0.216-1.073-0.44-1.6036-0.672-0.3623-0.158-0.7247-0.321-1.0836-0.488-5.3814-2.496-10.339-5.818-14.693-9.847 1.5416-2.1 2.8047-3.169 2.8047-3.169h10.362l1.5533 5.224 2.6604 8.952z" fill="#3A3768"/> <path d="m137.27 181.01 8.889 1.57c-2.379 5.419-5.592 10.432-9.521 14.857l0.632-16.427z" fill="#3A3768"/> </g> </g> <defs> <clipPath id="a"> <rect width="176" height="227" fill="#fff"/> </clipPath> </defs> </svg> <div class="div2"></div> </body> </html>
a code pen demo if you want https://codepen.io/hileamlak/pen/qBZVqaW .
So when a region in the svg is clicked here is what is console logged. But I was expecting the whole svg to be printed
2 answers
solution1
2 2020-09-03 22:01:51
Yes, event.target is the path on which you clicked, while this is the svg element:
let svg = document.body.querySelector('.notebook');
svg.addEventListener("click",openHome)
let div2 = document.body.querySelector('.div2')
function openHome(event){
console.log(event.target)
div2.innerText= this.outerHTML;
}
Fiddle here
solution2
2 ACCPTED 2020-09-03 22:05:58
This is expected behavior. The event.target is the element, where the event was triggered. If a path is clicked, then event.target is the path . The event then bubbles up, until it reaches the svg , where it is listened. But the event.target remains the original element.
Have a look at bubbling and capturing or search elsewhere how event propagation works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Props not getting passed to onClick function
Is there a way to register an onclick event handler on elements within an SVG image?
escape possible quotes in string passed to a js function in a onclick event
variable passed as function parameter to onclick event showing as "not defined"
How to extract the value passed in through onclick function event?
jquery function onclick event not getting called
Javascript function not getting called at the onclick event of a button
Replace an SVG image onClick
I want to disabled onClick event for image inside div onClick function?
Start a svg animation onclick event
Related Tags