Problemanalyse von benutzerdefinierten HTML5-Attributen

Beim Übertragen von Werten zwischen Seiten und JS verwenden wir häufig data-id = 1 und erhalten dann den Wert der ID über e.target.dataset.id

Heute kann ich den Wert nicht ermitteln, wenn ich ihn bekomme

Später stellte ich fest, dass das E-Objekt über die Attribute currentTarget und target verfügt und sich der Datensatz in currentTarget befindet, sodass der korrekte Wert über e.currentTarget.dataset.id erhalten wird.

Darüber hinaus ist es am besten, für die Benennung von data-id=1 keine Kamel-Schreibweise zu verwenden, wie zum Beispiel: data-Id=1 , da sonst der Wert manchmal nicht abgerufen werden kann.

Auf Websites sieht man häufig Attributdefinitionen, die mit „data-“ beginnen. Obwohl W3C dies nicht erkennt, schreibt das neueste HTML5 vor, dass „data-“ sinnvoll ist. In HTML5 ist alles, was mit „data-“ beginnt, ein benutzerdefiniertes Attribut, das normalerweise zur Implementierung verwendet wird Einige Elemente, die in HTML nicht klar definiert sind, wenden benutzerdefinierte Attribute auf den Code an.

Ereignisse sind die Kommunikationsmethode von der Ansichtsschicht zur Logikschicht.

Ereignisse können das Benutzerverhalten zur Verarbeitung an die Logikschicht zurückmelden.

Ereignisse können an Komponenten gebunden werden. Bei Erreichen des Triggerereignisses wird die entsprechende Ereignisverarbeitungsfunktion in der Logikschicht ausgeführt.

Ereignisobjekte können zusätzliche Informationen wie ID, Datensatz und Berührungen enthalten.

Binden Sie einen Event-Handler an die Komponente.

Wenn der Benutzer beispielsweise auf die Komponente klickt, wird bei bindtap die entsprechende Ereignisverarbeitungsfunktion auf der entsprechenden Seite der Seite gefunden.

 <view id=tapTest data-hi=WeChat bindtap=tapName> Klicken Sie auf mich </view>

Schreiben Sie die entsprechende Ereignisverarbeitungsfunktion in die entsprechende Seitendefinition, und der Parameter ist Ereignis.

 Seite({ tapName: function(event) { console.log(event) }})

Sie können sehen, dass die abgemeldeten Informationen ungefähr wie folgt lauten:

 { type:tap, timeStamp:895, target: { id: tapTest, dataset: { hi:WeChat } }, currentTarget: { id: tapTest, dataset: { hi:WeChat } }, detail: { x:53, y: 14 }, berührt:[{ bezeichner:0, pageX:53, pageY:14, clientX:53, clientY:14 }], changesTouches:[{ Identifier:0, SeiteX:53, SeiteY:14, ClientX:53, ClientY:14 }]}

Reagieren Sie auf Ereignisse mit WXS-Funktionen

Das Obige ist die vom Herausgeber eingeführte Problemanalyse der benutzerdefinierten HTML5-Attribute. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!