Почему? Событие щелчка работает программно, но не с помощью мыши.

  • Автор темы fixMobile77
  • 77
  • Обновлено
  • 12, May 2024
  • #1
Трудно показать вам весь код, но, возможно, вы что-то о нем знаете. Я создаю событие клика, как показано ниже: Если после addEventListener я добавляю divSel.click(), щелчок работает. НО если я нажму кнопку мышкой, то это не сработает. Кто-нибудь, пожалуйста, скажите мне, почему????

 

divDataSel = document.createElement("div");

divBlock.appendChild(divDataSel);

divSel = document.createElement("div");

divSel.className = "Button1aSm";

if(oBlockRec.Data.nChtData == 1) divSel.classList.add("Button1aSmOn");

divSel.innerHTML = "Count";

divDataSel.appendChild(divSel);

divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 1) });

if(is_numeric(arData0.Avg) || arData0.Avg == "n/a") {

divSel = document.createElement("div");

divSel.className = "Button1aSm";

if(oBlockRec.Data.nChtData == 2) divSel.classList.add("Button1aSmOn");

divSel.innerHTML = "Average";

divDataSel.appendChild(divSel);

divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 2) });

}

if(is_numeric(arData0.Pcnt)) {

divSel = document.createElement("div");

divSel.className = "Button1aSm";

if(oBlockRec.Data.nChtData == 3) divSel.classList.add("Button1aSmOn");

divSel.innerHTML = "Percent";

divDataSel.appendChild(divSel);

divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 3) });

}

if(is_numeric(arData0.Snt)) {

divSel = document.createElement("div");

divSel.className = "Button1aSm";

if(oBlockRec.Data.nChtData == 4) divSel.classList.add("Button1aSmOn");

divSel.innerHTML = "Sentiment Avg.";

divDataSel.appendChild(divSel);

divSel.addEventListener("click", (evt) => { setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, 4) });

}

Код (разметка):

fixMobile77


Рег
17 Dec, 2012

Тем
1

Постов
4

Баллов
14
  • 21, May 2024
  • #2
Спасибо за ответ.

Я программирую Javascript и HTML около 25 лет, так что, возможно, опыта недостаточно; образование. Код находится в функции, и все переменные ограничены этой функцией.

Я просто исключил это из поста. Я не уверен, что вы подразумеваете под этим: «Кажется, вы пытаетесь получить доступ к какому-то глобальному элементу внутри обработчика событий». Вы имеете в виду oBlockRec? Это переменная в функции, в которой находится этот код.

Я полагаю, я мог бы сохранить BlockIdx в атрибуте набора данных или что-то в этом роде. Блоки кода внутри вызовов addEventListener имели доступ к переменной oBlockRec, поэтому я не вижу в этом проблемы. Этот код не работает.

У него нет доступа к oBlockRec, а event.currentTarget.value не является параметром.

Это целое число, указывающее отображаемое числовое значение (cnt, avg, pcnt или sntavg). Полагаю, я мог бы поместить это и в атрибут набора данных, но — почему?

onclick = (событие) => {

setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, event.currentTarget.value);

}, // по щелчку

Я бы сказал ДА, дикая догадка.

У меня есть еще одна функция для другого отчета, которая использует точный тот же код (чего я обычно не делаю), и она работает нормально. Это определенно была проблема с Javascript.

Я переписал все это, используя строковую переменную и внутренний HTML.

Я добавил клики addEventListener после установки html. Теперь все работает нормально.

Весь полученный HTML-код находится в одном и том же месте.

События кликов теперь работают. Ваше использование Object.assign интересно.

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

hitman1


Рег
02 Aug, 2015

Тем
0

Постов
4

Баллов
4
  • 21, May 2024
  • #3
Спасибо за ответ.

Нет, ничего сверх этого нет.

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

Таблица отчета следует за кнопками (не «над» и «под» ними).

Если я не включаю таблицу, кнопки работают нормально.

Я попробовал добавить кнопки после добавления таблицы.

На этот раз кнопки вообще не появились.

Я сделал console.log(divDataSel.innerHTML). Кнопки были в html.

К вашему сведению: класс CSS для кнопок является стандартным для этого приложения.

В этом классе существуют сотни кнопок.

Они все появляются.

Я добавил красную рамку к divDataSel, и браузер отобразил плоскую красную линию прямо над таблицей.

В конце концов я переписал код, используя строковую переменную html вместо создания элементов.

Я использовал .innerHTML, чтобы добавить код на страницу.

После того, как все было нарисовано, я добавил код .addEventListener('click'...).

Теперь все выглядит так, как и должно быть, и события щелчка работают нормально.

Я ненавижу Javascript, потому что он совершенно любительский.

Мне надоело бесконечно искать обходные пути для плохого языка программирования. Еще раз спасибо за ответ.
 

off4vra


Рег
01 Jan, 2011

Тем
0

Постов
3

Баллов
3
  • 01, Jun 2024
  • #4
Итак... ты не фанат Slayer? Или группа Уке? Мне нравится кавер группы Сары и Роба «Уке». Удивлен, что ты не прокомментировал, кто мой аватар... Скажем так, у него есть яйца. МАЛЬЧИК! Так что хватайте своего уке и приводите с собой друга, потому что пришло время воскресной группы уке.
 

ramzes131


Рег
07 Jan, 2014

Тем
0

Постов
2

Баллов
2
  • 02, Jun 2024
  • #5
1) Если вы не намерены перевернуть птицу пользователям, не использующим мышь и не использующим сенсорный ввод, не устанавливайте onclick на DIV.

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

2) Невозможность объявить «var» или определить область действия, например «let/const», вероятно, является значительной частью ваших проблем.

3) Не используйте внутренний HTML, если вы действительно не используете разметку.

4) Object.assign — ваш друг.

Как и функции.

Гораздо меньше функциональных выражений теперь обеспечивают нам изоляцию области действия благодаря let/const.

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

Догадываюсь с большим трудом, но:

 

{ // scope isolation

const

divDataSel = divBlock.appendChild(document.createElement("div")),

onclick = (event) => {

setStatsAnlyBlockDataCht(oBlockRec.BlockIdx, event.currentTarget.value);

}, // onclick

makeButton = (textContent, value) => {

let className = "Button1aSm" + (

oBlockRec.Data.nChtData === value ?

"Button1aSmOn" :

""

);

divDataSel.appendChild(

Object.assign(

document.createElement("button"),

{

className,

onclick,

textContent,

type : "button", // so we don't have to event.preventDefault()

value

}

)

);

}; // makebutton

makeButton("Count", 1);

if (

is_numeric(arData0.Avg) ||

arData0.Avg == "n/a"

) makeButton("Average", 2);

if (is_numeric(arData0.Pcnt)) makeButton("Percent", 3);

if (is_numeric(arData0.Snt)) makeButton("Sentiment Avg.", 4);

} // scope isolation

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

. Это говорит не только о неспособности понять простоту JavaScript, но и о том, как правильно использовать HTML. Тем более, эти имена переменных и классов вызывают у меня рвоту.
 

Wheeze


Рег
20 Nov, 2013

Тем
2

Постов
4

Баллов
24
  • 04, Jun 2024
  • #6
Ах, объектные литералы — понятно, это имя переменной.

Спасибо.

Я не уверен, что вы подразумеваете под этим: «освободить выполнение или выполнить операцию, которая выполняет перекомпоновку».

В этом коде я не использовал InnerHTML, я использовал document.createElement и AppendChild.

Если бы это была ошибка в моем коде, мне бы очень хотелось узнать, что не так.

Как я уже сказал, это происходит не в первый раз. Для меня это не академический подход, я стараюсь разработать приложение как можно быстрее. Программно это означает просто divSel.click(). Ах, Истребительница.

По иронии судьбы, я шред-гитарист.

Я играю с 5 лет, лидирую с 13 – трачу слишком много часов на тренировки – до сих пор. Мне нравятся Сатч, Вай, Мальмстин (ненавижу Мальмстина, но какой гитарист!), Джон Петруччи и т. д. Некоторое время я преподавал гитару.

Это было совсем не весело, как присматривать за детьми. Раньше мои волосы были до половины спины. Нет, мне никогда не нравился металл, кровь и тому подобное.

Мне нравятся Хендрикс, Зеп и другие вещи постарше. Однако у меня есть друг, который играет на мандолине (двуструнной уке).
 

iiapajloh


Рег
01 Jan, 2011

Тем
1

Постов
3

Баллов
13
  • 13, Jun 2024
  • #7
Внешний {} предназначен для того, чтобы переменная «let button» не попадала в родительскую область.

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

Также обратите внимание, что, поскольку мы буквально только что создали «кнопку», мы можем напрямую назначить onclick вместо addEventListener и получить такое же поведение.

Что-то обычно не одобряется, поскольку другие вещи могут добавить своих собственных слушателей.

но они сделают это позже.

Мы буквально только что создали элемент, так что еще ни у кого не было возможности осуществить этот трюк! Я также использую addChild вместо add, поскольку последний не возвращает добавленный элемент.

Если вы добавляете только что-то одно, «appendChild» в этом смысле предпочтительнее.

Если вы хотите добавить кучу элементов и/или текста, добавьте выигрыши.
 

kizer1


Рег
20 Nov, 2015

Тем
1

Постов
2

Баллов
12
  • 13, Jun 2024
  • #8
Спасибо за ваш ответ, еще раз. Насколько константа/пусть иди, я использую константа если он не изменится после того, как я его объявлю/создам экземпляр. В противном случае я использую вар если я не нахожусь во внутреннем блоке кода и не хочу сохранить его в этой области - тогда я использую позволять. Я до сих пор не понимаю в чем дело позволять. Меня больше всего беспокоит потребление памяти. Область действия убивает переменную, когда она мне больше не нужна. Я полагаю, что есть что сказать и о безопасности. Я снова использую позволять если его нужно использовать в небольшом блоке кода, чаще всего в цикле while или for. Я не понимаю этого:
 
{
let button = document.createElement("button");
button.className = className;
button.onclick = onclick;
button.textContent = textContent;
button.type = "button";
button.value = value;
divDataSet.appendChild(button);
}
Код (разметка): VS
  { Object.assign( document.createElement("button"), { className, onclick, textContent, type : "button", value } ) } 
Код (разметка): В первом блоке эти переменные должны быть созданы, прежде чем вы сможете их в любом случае назначить, поэтому я не понимаю сути. Во втором случае атрибутам присваиваются имена, поэтому Javascript знает, какую переменную в какой атрибут поместить. В первом блоке откуда Javascript знает, что в какой атрибут поместить? Это имя переменной, позиция в списке или . . . ? oBlockRec используется во всем интерфейсе и фактически представляет собой один объект в массиве (таким образом, BlockIdx). Это целая куча данных, взятых с сервера. Я думаю, что пытаться хранить в элементе html — это слишком много, и я не вижу в этом никакого смысла.

Мне пришлось бы хранить его во множестве элементов, каждый из которых использует эти данные.

Используемый мной внутреннийHTML не является производным от пользовательского ввода, и это был единственный способ превратить Javascript в а.) фактическое отображение HTML и б.) запуск события щелчка.

Примечание: в одном варианте с использованием document.createElement, когда я выполнял console.log(divDataSet.innerHTML), HTML был там, но браузер его не отображал. Опять же, событие щелчка работало, если я запускал его программно, а не с помощью мыши.

Над кнопками на оси Z нет элементов. Это не первый раз, когда это происходит со мной. Вы правы, что не используете click. Мне нужно изменить это на pointerup.

Обычно я так делаю, но здесь это ускользнуло от меня.

Я исправлю это. В этом конкретном случае я не вижу использования ключевых событий.

Это отчет, и клавиатура здесь практически не используется. Спасибо за совет! Я уверен, что Object.assign когда-нибудь пригодится. В очередной раз благодарим за помощь. Я просто должен сказать, что я ненавижу это: «Я убью тебя и твои мечты сегодня вечером, начну новую жизнь. Пролей свою смерть на мне, позволь своей родословной питать мою молодость».
 

василий трошин


Рег
27 Apr, 2012

Тем
0

Постов
3

Баллов
3
Тем
49554
Комментарии
57426
Опыт
552966

Интересно