Анализ проблем с пользовательскими атрибутами HTML5

При передаче значений между страницами и js мы часто используем data-id=1, а затем получаем значение id через e.target.dataset.id

Сегодня я не могу получить значение, когда получу его.

Позже я обнаружил, что объект e имеет атрибуты currentTarget и target, а набор данных находится в currentTarget, поэтому правильное значение получается через e.currentTarget.dataset.id .

Кроме того, лучше не использовать верблюжий регистр для именования data-id=1, например: data-Id=1 , иначе значение иногда может быть невозможно получить.

На веб-сайтах часто можно увидеть определения атрибутов, начинающиеся с data-. Хотя W3C не распознает это, последняя версия HTML5 предусматривает, что data- является разумным. В HTML5 все, что начинается с data-, является пользовательским атрибутом, который обычно используется для реализации. Некоторые элементы, которые четко не определены в HTML, применяют к коду определяемые пользователем атрибуты.

События — это метод связи между уровнем представления и логическим уровнем.

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

События могут быть привязаны к компонентам. При достижении триггерного события будет выполнена соответствующая функция обработки событий на логическом уровне.

Объекты событий могут нести дополнительную информацию, такую ​​как идентификатор, набор данных, касания.

Привяжите обработчик событий к компоненту.

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

 <view id=tapTest data-hi=WeChatbindtap=tapName> Нажмите на меня </view>

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

 Страница ({ TapName: функция (событие) { console.log (событие) }})

Вы можете видеть, что выведенная информация примерно следующая:

 { type:tap, timeStamp:895, цель: { id: TapTest, набор данных: { hi:WeChat } }, currentTarget: { id: TapTest, набор данных: { hi:WeChat } }, подробно: { x:53, y: 14 }, касается: [{ идентификатор:0, pageX:53, pageY:14, clientX:53, clientY:14 }], измененоTouches:[{ идентификатор:0, pageX:53, pageY:14, clientX:53, clientY:14 }]}

Реагируйте на события с помощью функций WXS

Выше представлен анализ проблем с пользовательскими атрибутами HTML5, представленными редактором. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!

Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!