Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2017, 06:33
Интересующийся
Отправить личное сообщение для aston Посмотреть профиль Найти все сообщения от aston
 
Регистрация: 03.09.2017
Сообщений: 12

Изменить логику скрипта. js jq
Здравствуйте друзья! Есть скрипт отлавливающий правый клик мыши по ссылкам с классом(.а). Скрипт работает прекрасно! Но логика заключается в том, что он после загрузки страницы начинает циклом искать все ссылки, и далее из них формирует массив, который передает в функцию отвечающую за отлавливание события rightclick. Проблема заключается в том, что он в начале один раз получает массив ссылок и работает только с ним, то есть если я поменяю местами ссылки(имеющие определенные атрибуты) или добавлю новые, скрипт не работает или работает со старыми значениями атрибутов.

Вопрос: как переписать инициализацию скрипта, чтобы он работал на всех ссылках с классом(.а) но брал значения атрибутов не из кэша в массиве сформированном после загрузки страницы, а в реальном времени?

(function() {
        // получаем все ссылки
        var taskItems = document.querySelectorAll(".a");

        // кладем в массив и вызываем саму функцию
        for (var i = 0, len = taskItems.length; i < len; i++) {
            var taskItem = taskItems[i];
            contextMenuListener(taskItem);
        }

  function contextMenuListener(el) {
      el.addEventListener( "contextmenu", function(event) {
          event = event || window.event;
          event.preventDefault ? event.preventDefault() : event.returnValue = false;
          console.log(event, el);
          
          //... некий код js/jq
          
      return false;
    });
  }
 
})();

Последний раз редактировалось aston, 04.10.2017 в 06:38.
Ответить с цитированием
  #2 (permalink)  
Старый 04.10.2017, 08:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

aston,
Делегирование событий
Ответить с цитированием
  #3 (permalink)  
Старый 04.10.2017, 08:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

aston,
на jQuery on
js jq обработку клика ставят на ближайшего постоянного родителя
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2017, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

aston,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  a.a{
    color: #FF3300;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  $("table").on("contextmenu", "a.a", function(event) {
   event.preventDefault()
})
});
  </script>
</head>

<body>
<table>
    <tr>
        <td><a href="" class="a">1</a></td>
        <td><a href="" class="a">2</a></td>
        <td><a href="" class="a">3</a></td>
        <td><a href="" class="a">4</a></td>
        <td><a href="" class="a">5</a></td>
    </tr>
    <tr>
        <td><a href="" class="a">1</a></td>
        <td><a href="" class="a">2</a></td>
        <td><a href="" class="a">3</a></td>
        <td><a href="" class="a">4</a></td>
        <td><a href="" class="a">5</a></td>
    </tr>
    <tr>
        <td><a href="" class="a">1</a></td>
        <td><a href="" class="a">2</a></td>
        <td><a href="" class="a">3</a></td>
        <td><a href="" class="a">4</a></td>
        <td><a href="" class="a">5</a></td>
    </tr>
</table>
<a href="" class="test">1</a>
 <a href="" class="test">2</a>
 <a href="" class="test">3</a>
 <a href="" class="test">4</a>
 <a href="" class="test">5</a>
<table>
    <tr>
        <td><a href="" class="a">1</a></td>
        <td><a href="" class="a">2</a></td>
        <td><a href="" class="a">3</a></td>
        <td><a href="" class="a">4</a></td>
        <td><a href="" class="a">5</a></td>
    </tr>
    <tr>
        <td><a href="" class="a">1</a></td>
        <td><a href="" class="a">2</a></td>
        <td><a href="" class="a">3</a></td>
        <td><a href="" class="a">4</a></td>
        <td><a href="" class="a">5</a></td>
    </tr>
</table>
 </body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 04.10.2017, 08:46
Интересующийся
Отправить личное сообщение для aston Посмотреть профиль Найти все сообщения от aston
 
Регистрация: 03.09.2017
Сообщений: 12

Спасибо друг! Все работает. Я еще приду! Но в другой теме
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить работу скрипта при другой ширине экрана AlexPol Мобильный JavaScript 3 22.08.2017 21:53
js стиль render для react.js vflash Ваши сайты и скрипты 5 01.04.2016 22:57
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Организация работы JS скрипта djsadd Элементы интерфейса 3 18.03.2012 00:17
подключение стороннего js скрипта friend Общие вопросы Javascript 2 24.05.2008 19:51