Как проверить, добавлен ли элемент html в прослушиватель кликов, используя javascript [duplicate]

Об этом говорится в учебнике Python (прокрутите немного вниз, пока не дойдете до части обрезки).

Диаграмма искусства ASCII также полезна для запоминания того, как работают срезы :

 +---+---+---+---+---+---+
 | P | y | t | h | o | n |
 +---+---+---+---+---+---+
 0   1   2   3   4   5   6
-6  -5  -4  -3  -2  -1

. Один из способов вспомнить, как работают срезы, - это указать индексы как указывающие между символами , с левым краем первого символа с номером 0. Тогда правый край последнего символа строки из символов n имеет индекс n .

41
задан Stano 12 July 2012 в 16:42
поделиться

10 ответов

Невозможно проверить, существуют ли динамически подключенные прослушиватели событий.

Единственный способ узнать, подключен ли прослушиватель событий, - это добавить прослушиватели событий следующим образом:

elem.onclick = function () { console.log (1) }

Затем вы можете проверить, подключен ли прослушиватель событий к onclick, возвращая !!elem.onclick (или что-то подобное).

21
ответ дан Ivan 25 August 2018 в 19:41
поделиться

tl; dr: Нет, вы не можете сделать это любым способом, поддерживаемым изначально.


Единственный способ, который я знаю для достижения этого, - создать пользовательский объект хранения, в котором вы храните запись добавленных слушателей. Что-то в следующих строках:

/* Create a storage object. */
var CustomEventStorage = [];

Шаг 1: Сначала вам понадобится функция, которая может перемещаться по объекту хранения и возвращать запись элемента, заданного элементом (или false).

/* The function that finds a record in the storage by a given element. */
function findRecordByElement (element) {
    /* Iterate over every entry in the storage object. */
    for (var index = 0, length = CustomEventStorage.length; index < length; index++) {
        /* Cache the record. */
        var record = CustomEventStorage[index];

        /* Check whether the given element exists. */
        if (element == record.element) {
            /* Return the record. */
            return record;
        }
    }

    /* Return false by default. */
    return false;
}

Шаг 2. Затем вам понадобится функция, которая может добавить прослушиватель событий, а также добавить слушателя к объекту хранения.

/* The function that adds an event listener, while storing it in the storage object. */
function insertListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found. */
    if (record) {
        /* Normalise the event of the listeners object, in case it doesn't exist. */
        record.listeners[event] = record.listeners[event] || [];
    }
    else {
        /* Create an object to insert into the storage object. */
        record = {
            element: element,
            listeners: {}
        };

        /* Create an array for event in the record. */
        record.listeners[event] = [];

        /* Insert the record in the storage. */
        CustomEventStorage.push(record);
    }

    /* Insert the listener to the event array. */
    record.listeners[event].push(listener);

    /* Add the event listener to the element. */
    element.addEventListener(event, listener, options);
}

Шаг 3: Что касается фактического для вашего вопроса вам понадобится следующая функция, чтобы проверить, был ли элемент добавлен прослушиватель событий для указанного события.

/* The function that checks whether an event listener is set for a given event. */
function listenerExists (element, event, listener) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether a record was found & if an event array exists for the given event. */
    if (record && event in record.listeners) {
        /* Return whether the given listener exists. */
        return !!~record.listeners[event].indexOf(listener);
    }

    /* Return false by default. */
    return false;
}

Шаг 4: Наконец, вам понадобится функция, которая может удалить прослушиватель из объекта хранения.

/* The function that removes a listener from a given element & its storage record. */
function removeListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found and, if found, whether the event exists. */
    if (record && event in record.listeners) {
        /* Cache the index of the listener inside the event array. */
        var index = record.listeners[event].indexOf(listener);

        /* Check whether listener is not -1. */
        if (~index) {
            /* Delete the listener from the event array. */
            record.listeners[event].splice(index, 1);
        }

        /* Check whether the event array is empty or not. */
        if (!record.listeners[event].length) {
            /* Delete the event array. */
            delete record.listeners[event];
        }
    }

    /* Add the event listener to the element. */
    element.removeEventListener(event, listener, options);
}

Фрагмент:

window.onload = function () {
  var
    /* Cache the test element. */
    element = document.getElementById("test"),

    /* Create an event listener. */
    listener = function (e) {
      console.log(e.type + "triggered!");
    };

  /* Insert the listener to the element. */
  insertListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));

  /* Remove the listener from the element. */
  removeListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));
};
<!-- Include the Custom Event Storage file -->
<script src = "https://cdn.rawgit.com/angelpolitis/custom-event-storage/master/main.js"></script>

<!-- A Test HTML element -->
<div id = "test" style = "background:#000; height:50px; width: 50px"></div>


Хотя прошло более 5 лет с тех пор, как ОП опубликовал вопрос, я считаю, что люди, которые наткнутся на него в будущем, извлекут выгоду из этого ответа, поэтому не стесняйтесь делать предложения или улучшения.

3
ответ дан Angel Politis 25 August 2018 в 19:41
поделиться

Возможный дубликат: Проверьте, есть ли у элемента прослушиватель событий. нет jquery . Пожалуйста, найдите мой ответ.

В принципе, вот трюк для браузера Chromium (Chrome):

getEventListeners(document.querySelector('your-element-selector'));
1
ответ дан arufian 25 August 2018 в 19:41
поделиться

Я только что нашел это, пытаясь узнать, было ли мое событие прикреплено ....

, если вы это сделаете:

item.onclick

он вернет «null»

, но если вы это сделаете:

item.hasOwnProperty('onclick')

, то это «TRUE»

, поэтому я думаю, что когда вы используете addEventListener для добавления обработчиков событий, доступ к нему осуществляется через «hasOwnProperty». Хотел бы я знать, почему и как, но, увы, после исследования я не нашел объяснений.

-1
ответ дан carinlynchin 25 August 2018 в 19:41
поделиться

То, что я сделал бы, это создать логическое значение вне вашей функции, которое начинается с FALSE и получает значение TRUE, когда вы присоединяете событие. Это послужит вам каким-то флагом, прежде чем вы присоедините это событие снова. Вот пример этой идеи.

// initial load
var attached = false;

// this will only execute code once
doSomething = function() {
  if (!attached) {
    attached = true;
    //code
  }
} 

//attach your function with change event
window.onload = function() {
    var txtbox = document.getElementById("textboxID");
    if(window.addEventListener){
        txtbox.addEventListener("change", doSomething, false);
    } else if(window.attachEvent){
        txtbox.attachEvent("onchange", doSomething);
    }
}
15
ответ дан Cesar 25 August 2018 в 19:41
поделиться

Вот сценарий, который я использовал для проверки наличия динамически подключенного прослушивателя событий. Я использовал jQuery для присоединения обработчика события к элементу, а затем инициировал это событие (в данном случае событие «click»). Таким образом, я могу получить и захватить свойства событий, которые будут существовать только в том случае, если обработчик события присоединен.

var eventHandlerType;

$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');

function clickEventHandler(e) {
    eventHandlerType = e.type;
}

if (eventHandlerType === 'click') {
    console.log('EventHandler "click" has been applied');
}
3
ответ дан dsmith63 25 August 2018 в 19:41
поделиться

Я просто написал сценарий, который позволяет вам это достичь. Он дает вам две глобальные функции: hasEvent(Node elm, String event) и getEvents(Node elm), которые вы можете использовать. Имейте в виду, что он изменяет метод прототипа EventTarget add/RemoveEventListener и не работает для событий, добавленных через HTML-разметку или синтаксис javascript для elm.on_event = ...

Дополнительная информация в GitHub

Live Demo

Сценарий:

var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();
0
ответ дан Gaurang Tandon 25 August 2018 в 19:41
поделиться

Я сделал что-то вроде этого:

const element = document.getElementById('div');

if (element.getAttribute('listener') !== 'true') {
     element.addEventListener('click', function (e) {
         const elementClicked = e.target;
         elementClicked.setAttribute('listener', 'true');
         console.log('event has been attached');
    });
}

Создание специального атрибута для элемента, когда слушатель подключен, а затем проверяет, существует ли он.

3
ответ дан Karol Grabowski 25 August 2018 в 19:41
поделиться

Вы могли бы в теории piggyback addEventListener и removeEventListener добавить удалить флаг в этот «объект». Ужасно и я не тестировал ...

-1
ответ дан kofifus 25 August 2018 в 19:41
поделиться

Вы всегда можете проверить вручную, если ваш EventListener существует, например, с помощью инспектора Chrome. На вкладке Элемент у вас есть традиционная подкладка «Стили», а рядом с ней - «Слушатели событий». Это даст вам список всех EventListeners со связанными элементами.

4
ответ дан Paul Leclerc 25 August 2018 в 19:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: