Определение ссылки на элемент, который будет сохранен в формате JSON без использования класса или идентификатора элемента

0

Я хотел бы узнать, как я могу определить ссылку на целевой элемент любого события клика на странице, которая будет храниться в JSON (для передачи).

Решение не должно полагаться на использование класса или идентификатора цели.

В частности, всякий раз, когда элемент (который может не иметь class или id) нажимается на странице, я пытаюсь определить ссылку на целевой элемент, который можно использовать в формате JSON для передачи, чтобы я мог использовать его на идентичной странице.

Пример использования:

Это тест, в котором два или более пользователя работают вместе в одном интерфейсе с разных устройств

  • Приложение для совместной работы, которое обслуживает 2 пользователя одинаковыми страницами:

Пользователь 1:

<body>
    <div class="body-wrapper">
        <button>Click Here</button>
    </div>
    <div>
        <button>Click Me</button>
        <div>
             <button>Or Click Me</button>
        </div>
    </div>
</body>

Пользователь 2: (идентичный)

  • когда кнопка "Click Me" является объектом события клика, слушатель возвращает некоторую ссылку на эту кнопку, которую я могу отправить через Интернет (здесь, где необходим формат JSON)

  • Результат: я могу повторить щелчок на этой кнопке в DOM User 2.

Редактировать:

Как кратко обсуждается в комментариях к ответам, делегирование событий может использоваться для обработки динамически созданного контента. Является ли это правильной комбинацией ответа на этот вопрос с делегацией событий?

$(document).on("mouseup mousedown click mousemove", function(e) {
    var element = e.target.index("body *");
    socket.emit("event", element, e);
});
  • 0
    Я обновил вопрос, чтобы разрешить сочетание превосходного ответа Бармара с делегированием события, как упомянуто CBroe в комментариях к ответу ниже.
  • 0
    Часть .on() в порядке для целевых элементов, которые могли не быть частью DOM во время выполнения привязки события. Но здесь может возникнуть проблема с всплывающими событиями, так как это может привести к появлению большего количества элементов, чем вы собираетесь. Если вы хотите обрабатывать только щелчок по исходному целевому элементу, но не по каждому из его предков, то вам следует предотвратить всплывание события.
Показать ещё 3 комментария
Теги:
dom
reference

1 ответ

2
Лучший ответ

Если DOM идентична на обеих страницах, вы можете использовать индекс элемента в DOM:

$("button").click(function() {
    var position = $(this).index("body *");
    // Send "position" to the server
    ...
}

На странице приема вы можете найти соответствующую кнопку с:

$("body *").eq(position);

Правильный способ сделать делегацию мероприятия, о которой вы спрашивали, это:

$(document).on("mouseup mousedown click mousemove", "button,checkbox,option", function(e) {
    var element = $(this).index("body *");
    socket.emit("event", element, e);
});

Измените список типов элементов на все те, которые вам нужно, чтобы поймать клики.

Поделиться
  • 0
    Это классно! Я даже не знал, что у элементов был индекс в DOM.
  • 0
    Это, наверное, самый сложный вопрос, который я задал для SO из сотен, но вы отвечаете на него в 4 строки. +10
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню