Distinct code work in Mozilla and Chrome



  • There's a code

        <body onclick='alert(event.target.tagName)'><button><i>Button</i></button></body>
    

    On the click on the button. word Button Chrome. Iand Mozilla - BUTTON♪ Why and how to make Mozilla the deepest element.



  • Looks like Firefox should be. https://www.w3.org/TR/html5/forms.html#the-button-element :

    Content model: Phrasing content, but there must be no interactive content descendant.

    I mean, <button> may contain https://www.w3.org/TR/html5/dom.html#phrasing-content-1 - text and/or one or more elements from the list:

    a, abbr, area (if he is descendant of element map), audio, b, bdi, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, math, meter, rubb, object, output,

    But the content is inside. <button> Can't be interactive. W3C recommendations describe what https://www.w3.org/TR/html5/dom.html#interactive-content-0 ♪ Interactive elements may be:

    a, audio (if controls are present), button, embed, iframe, img (if usemap attribute), input (if type is not hidden), keygen, label, object (if usemap attribute), select, textarea, video (if controls are present)

    These elements have activation behavior that defines the activation mechanism of the element.

    When the user clicks on the element, a nearest interactive element is searched, starting with the chewing element, the first activation behavior element is being sought up the tree. If this element is found, it's an event. click

    In your example <i> is not interactive. The nearest interactive is <button>so events click It works. <button>

    A solution could be used <div> or <span>recycled <button>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2