简体   繁体   English

SVG 图像未在 onclick 事件中传递给函数

[英]SVG image not getting passed to a function in an onclick event

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?我有一个 svg 有一个onclick事件但是每当它被点击event.target是一个被点击的path而不是整个svg ,为什么会这样? Is this how svg's work?这是 svg 的工作方式吗? 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在我的 Js 我console.log() svg 当它被点击时,你可以检查它,但你得到的不是整个 svg 而是被点击的路径(某些部分)

 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 .如果您想要https://codepen.io/hileamlak/pen/qBZVqaW,则可以使用代码笔演示。

So when a region in the svg is clicked here is what is console logged.因此,当单击 svg 中的某个区域时,控制台会记录该区域。 在此处输入图片说明 But I was expecting the whole svg to be printed但我期待打印整个 svg

Yes, event.target is the path on which you clicked, while this is the svg element:是的, event.target 是您单击的路径,而是 svg 元素:

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在这里摆弄

This is expected behavior.这是预期的行为。 The event.target is the element, where the event was triggered. event.target是触发事件的元素。 If a path is clicked, then event.target is the path .如果单击path ,则event.targetpath The event then bubbles up, until it reaches the svg , where it is listened.然后事件冒泡,直到到达svg ,在那里监听它。 But the event.target remains the original element.event.target仍然是原始元素。

Have a look at bubbling and capturing or search elsewhere how event propagation works.看看冒泡和捕获或在别处搜索事件传播的工作原理。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM