Mein CODE
HTML:
%Vor%JS:
%Vor%CSS:
%Vor%Problem
Ich kann auf .icon in Chrome klicken, aber nicht in ff. Wenn ich auf .icon klicke, klickt es auf ganz button .
Frage:
Ist mein Code nicht gültig? Wenn mein Code gültig ist, was ist die Lösung für dieses Problem.
Was ich versucht habe
Ich habe versucht, $('.icon').click() von der Konsole aus zu machen, und es funktioniert perfekt in ff, so dass das Problem ist, dass span in button nicht anklickbar ist.
e.preventDefault() und e.stopPropagation funktionieren auch nicht.
Ich habe versucht, in span zu setzen, funktioniert aber auch nicht.
Siehe die Spezifikation , vor allem die verbotenen Inhalte (in der SGML-Definition, für Unterstützung lesen, hier ): a s , form s, Formular "Kontrollen" ( input , select , usw.) und fieldset s.
Während Sie korrekt feststellen, dass span s (und div s usw.) legale Inhalte eines button -Elements sind, haben die illegalen Elemente alle damit zu tun, dass Sie Schaltflächeninhalte haben, die etwas anderes als Layouts haben / Styling.
Ich sehe in der Spezifikation nichts, was ausschließt, was Sie zu tun versuchen, aber ich sehe es sehr entmutigend und wäre nicht überrascht, wenn verschiedene Browser dies "entmutigen", indem sie es nicht unterstützen.
>Was soll ich sagen: Finden Sie einen anderen Weg, um das zu tun, was Sie wollen, wenn Sie Cross-Browser-Unterstützung haben wollen. Ich verstehe nicht, was Sie eigentlich machen wollen, deshalb halte ich es nicht für möglich, Alternativen vorzuschlagen. Ich verstehe, dass Sie anders auf das Klicken auf den Knopf als das Symbol reagieren möchten - aber das ist eine (gute, btw) Demonstration dessen, was Sie nicht wollen, nicht eine Erklärung eines tatsächlichen Problems, das Sie lösen wollen / p>
Eine Möglichkeit besteht darin, keine Schaltfläche zu verwenden und stattdessen ein anderes span oder ein div :
Wenn Sie hier sind, wird diese Lösung vielleicht für Sie funktionieren, obwohl sie nicht direkt mit der Frage in Verbindung steht.
Wenn Sie ein
angewendet haben$("button").click() Listener und <span> oder ein beliebiges anderes <tag> und .click Rückruffunktion bezieht sich auf $(this) (oder sogar this ) Wenn Sie auf die Schaltfläche klicken, wird this wahrscheinlich das oberste Tag sein, auf das Sie geklickt haben.
Dies wird oft, wie in meinem Fall, den Anrufer falsch zuordnen und Skriptfehler verursachen.
Ich hoffe, es hilft jemandem da draußen!
Mit vorherigen Antworten fand ich, dass ich nur mein Problem änderte und mir erlaubte, Inhalt in der Schaltfläche zu haben. Das Styling ist praktisch das gleiche, ich habe einfach die gleichen Bootstrap-Button-Klassen und -Elemente dort gelassen und es verhält sich genauso wie zuvor. Der Tabindex ist da, weil ich eine Dropdown-Liste innerhalb der Schaltfläche verwende, so dass die Schaltfläche (jetzt div) fokussiert werden kann und in Angular ein Ereignis (Unschärfe) oder (Fokus) aufweist.
Tags und Links javascript html jquery css html5