Using onclick outside the HTML namespace

Question

In XHTML, can onclick be used on elements outside the HTML namespace? On the code below, myFunction() fires when <p> is clicked but not when <t:div> is clicked. Can it be made to?

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:t="http://www.tei-c.org/ns/1.0">
<head><title>Sandbox</title></head>

<body>
<p     onclick="myFunction()">HTML p</p>
<t:div onclick="myFunction()">TEI div</t:div>

<script>
function myFunction() {
    (alert("Hello World"));
}
</script>

</body>
</html>

@charlietfl - Thought the same initially (tested on codepen and fiddle too). However, I felt there might have been some scoop to it... and so, when tested on the local machine by saving the file as .xhtml, the behavior in question does actually come to the fore. — Dhruv Saxena
– Dhruv Saxena, Commented Feb 4, 2017 at 22:52
@DhruvSaxena, not easily. I think the problem is that onclick just doesn’t have meaning outside the HTML namespace. It’s not built-in so to speak. But maybe there is a way to invoke it explicitly. — JPM
– JPM, Commented Feb 5, 2017 at 0:36

Alohci · Accepted Answer · 2017-02-05 02:49:34Z

3

You can't use onclick or other event handler content attributes on elements that are not HTML Elements, but you can attach an event listener in JavaScript. For example

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:t="http://www.tei-c.org/ns/1.0">
  <head><title>Sandbox</title></head>

  <body>
    <p onclick="myFunction()">HTML p</p>
    <t:div>TEI div</t:div>

    <script>
      function myFunction() {
        (alert("Hello World"));
      }
      document.getElementsByTagNameNS("http://www.tei-c.org/ns/1.0", "div")[0]
        .addEventListener("click", myFunction, false);
    </script>
  </body>
</html>

answered Feb 5, 2017 at 2:49

Alohci

84.2k16 gold badges121 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JPM Over a year ago

Ah, right, @Alohci, that’s what I was looking for. Thanks.

Mr Lister Over a year ago

Do you need the full namespace here? You can't do with just 't'?

Alohci Over a year ago

@MrLister - Yes, you do need the full namespace. The getElementsByTagNameNS method wouldn't know how to resolve 't' to the namespace. But you can easily try this for yourself. Just create a local file with a .xhtml extension with the content from this answer and open it in your browser.

JPM Over a year ago

@mrlister, if the question was meant for me: yes in this application, I need real namespaces. I can't use pseudo ones.

Mr Lister Over a year ago

@JPM Oh, I just wanted some clarification on what value you could use in the ...NS call.

Collectives™ on Stack Overflow

Using onclick outside the HTML namespace

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related