Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как при наведении на ссылку выполнить JS? (https://javascript.ru/forum/events/83610-kak-pri-navedenii-na-ssylku-vypolnit-js.html)

Sice 24.01.2022 23:08

Как при наведении на ссылку выполнить JS?
 
У меня есть 5 ссылок:
<a class='tv' href='#' data-token='link_1'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_2'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_3'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_4'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_5'><img src='graph.png'></a>

Мне необходимо, при наведении на них выполнить javascript:
<script type="text/javascript">
              let token = document.querySelector('[data-token]'); 
              token = token.getAttribute('data-token');
              
              new TV.widget(
                  {
                  "width": 980,
                  "height": 610,
                  "symbol": token ,
                  "interval": "5",
                  "timezone": "Europe/Moscow",
                  "theme": "dark",
                  "style": "1",
                  "locale": "ru",
                  "toolbar_bg": "#f1f3f6",
                  "enable_publishing": false,
                  "studies": [
                    "BB@tv-basicstudies"
                  ],
                  "show_popup_button": true,
                  "popup_width": "1000",
                  "popup_height": "650",
                  "container_id": token,
                  }
              );
           </script>

При этом передать параметр data-token в JS скрипт. Понимаю, что делается так:
let token = document.querySelector('[data-token]'); 
token = token.getAttribute('data-token');

Подскажите, как правильно это реализовать с помощью jQuery или ещё как, чтобы при наведении на ссылку, передался параметр (data - атрибут) и соответственно выполнился скрипт ? Спасибо.

рони 24.01.2022 23:30

Sice,
document.addEventListener("mouseover", function({ target }) {
            if (target = target.closest("[data-token]")) {
                const { token } = target.dataset;
                new TV.widget({
                    "width": 980,
                    "height": 610,
                    "symbol": token,
                    "interval": "5",
                    "timezone": "Europe/Moscow",
                    "theme": "dark",
                    "style": "1",
                    "locale": "ru",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": token,
                });
            }
        });

voraa 25.01.2022 07:54

рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.

Sice 25.01.2022 09:26

Цитата:

Сообщение от рони (Сообщение 543232)
Sice,
document.addEventListener("mouseover", function({ target }) {
            if (target = target.closest("[data-token]")) {
                const { token } = target.dataset;
                new TV.widget({
                    "width": 980,
                    "height": 610,
                    "symbol": token,
                    "interval": "5",
                    "timezone": "Europe/Moscow",
                    "theme": "dark",
                    "style": "1",
                    "locale": "ru",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": token,
                });
            }
        });

Спасибо за помощь! У меня в итоге вся страница исчезает и остается только виджет, а мне необходимо, чтобы при наведении показывался виджет, а когда курсор отводится от ссылки, убирается.

Sice 25.01.2022 09:26

Цитата:

Сообщение от рони (Сообщение 543232)
Sice,
document.addEventListener("mouseover", function({ target }) {
            if (target = target.closest("[data-token]")) {
                const { token } = target.dataset;
                new TV.widget({
                    "width": 980,
                    "height": 610,
                    "symbol": token,
                    "interval": "5",
                    "timezone": "Europe/Moscow",
                    "theme": "dark",
                    "style": "1",
                    "locale": "ru",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": token,
                });
            }
        });

Цитата:

Сообщение от voraa (Сообщение 543240)
рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.

Покажите пожалуйста пример

рони 25.01.2022 09:26

voraa,
ок! :)
document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[data-token]").forEach(
                function(link) {
                    const token  = link.dataset.token;
                    link.addEventListener("mouseenter", function() {
                        new TV.widget({
                            "width": 980,
                            "height": 610,
                            "symbol": token,
                            "interval": "5",
                            "timezone": "Europe/Moscow",
                            "theme": "dark",
                            "style": "1",
                            "locale": "ru",
                            "toolbar_bg": "#f1f3f6",
                            "enable_publishing": false,
                            "studies": [
                                "BB@tv-basicstudies"
                            ],
                            "show_popup_button": true,
                            "popup_width": "1000",
                            "popup_height": "650",
                            "container_id": token,
                        });
                    })
                }
            );
        });

Sice 25.01.2022 09:40

Цитата:

Сообщение от рони (Сообщение 543243)
voraa,
ок! :)
document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[data-token]").forEach(
                function(link) {
                    const token  = link.dataset.token;
                    link.addEventListener("mouseenter", function() {
                        new TV.widget({
                            "width": 980,
                            "height": 610,
                            "symbol": token,
                            "interval": "5",
                            "timezone": "Europe/Moscow",
                            "theme": "dark",
                            "style": "1",
                            "locale": "ru",
                            "toolbar_bg": "#f1f3f6",
                            "enable_publishing": false,
                            "studies": [
                                "BB@tv-basicstudies"
                            ],
                            "show_popup_button": true,
                            "popup_width": "1000",
                            "popup_height": "650",
                            "container_id": token,
                        });
                    })
                }
            );
        });

У меня в итоге весь контент исчезает и остается только виджет)) как его выводить в окне при наведении и чтобы он исчезал, когда курсор убирают с ссылки?)

рони 25.01.2022 09:49

Sice,
читайте документацию на ваш виджет, будет что-то такое ...
document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[data-token]").forEach(
                function(link) {
                    const token  = link.dataset.token;
                    let widget;
                    link.addEventListener("mouseenter", function() {
                      widget = new TV.widget({
                            "width": 980,
                            "height": 610,
                            "symbol": token,
                            "interval": "5",
                            "timezone": "Europe/Moscow",
                            "theme": "dark",
                            "style": "1",
                            "locale": "ru",
                            "toolbar_bg": "#f1f3f6",
                            "enable_publishing": false,
                            "studies": [
                                "BB@tv-basicstudies"
                            ],
                            "show_popup_button": true,
                            "popup_width": "1000",
                            "popup_height": "650",
                            "container_id": token,
                        });
                    });
                    link.addEventListener("mouseleave", function() {
                      if(widget)  widget.закройся
                      });
                }
            );
        });

Sice 25.01.2022 10:14

По средствам HTML я не смогу это сделать ? В этом в принципе и заключался вопрос, чтобы виджет показывался как отдельное (popup) окно.
В документации особо ничего нет, по этому вопросу https://www.tradingview.com/widget/symbol-overview/

ksa 25.01.2022 11:47

Цитата:

Сообщение от voraa
Тут уж лучше на каждую ссылку обработчик повесить.

Это довольно спорное утверждение, про именно "лучше"... :)


Часовой пояс GMT +3, время: 12:18.