I am clicking on the <Details> or <Summary> element?

Asked

Viewed 59 times

-2

I was very confused in the example below:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Exemplo</title>
</head>
<body>
    <details>
        <summary>O que é HTTPS?</summary>
        <p>
            HTTPS é uma implementação do protocolo HTTP sobre uma camada adicional de segurança
            que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam
            transmitidos por meio de uma conexão criptografada e que se verifique a autenticidade
            do servidor e do cliente por meio de certificados digitais.
            <a href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">Wikipédia</a>
        </p>
    </details>
<body>
</html>

For within the element <details> has the <summary> and the content, when I click to display the content I am clicking on <details>? as the <summary> is inside <details> is for me to be clicking on <details> since the <details> is the father of <summary>, but the content of <summary> is displayed in front of which of the two I would be clicking?

html

2 answers

4

First you should know that Javascript events are propagated to the parent elements, that is, when you click on <sumary> you are also clicking on <details>, since the first is the son of the second. So you are not clicking on one or the other but on both

<script>
    function log(el){
        console.log(`O elemento ${el} foi clicado`);
    }
</script>
<details onclick="log('details')">
    <summary onclick="log('summary')">O que é HTTPS?</summary>
    <p onclick="log('p')">
        HTTPS é uma implementação do protocolo HTTP sobre uma camada adicional de segurança
        que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam
        transmitidos por meio de uma conexão criptografada e que se verifique a autenticidade
        do servidor e do cliente por meio de certificados digitais.
        <a href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">Wikipédia</a>
    </p>
</details>

But you can stop the spread of the event and prevent the parent elements from receiving the click:

<script>
    function log(event, el, stop){
        console.log(`O elemento ${el} foi clicado`);
        if (stop) event.stopPropagation();
    }
</script>
<details onclick="log(event, 'details')">
    <summary onclick="log(event, 'summary', true)">O que é HTTPS?</summary>
    <p onclick="log(event, 'p', false)">
        HTTPS é uma implementação do protocolo HTTP sobre uma camada adicional de segurança
        que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam
        transmitidos por meio de uma conexão criptografada e que se verifique a autenticidade
        do servidor e do cliente por meio de certificados digitais.
        <a href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">Wikipédia</a>
    </p>
</details>

If you want to know which fish element was clicked ("the element below"), you can access the property target of the event:

<script>
    function log(event){
        console.log(`O primeiro elemento clicado foi ${event.target.tagName}`);
    }
</script>
<details onclick="log(event)">
    <summary>O que é HTTPS?</summary>
    <p>
        HTTPS é uma implementação do protocolo HTTP sobre uma camada adicional de segurança
        que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam
        transmitidos por meio de uma conexão criptografada e que se verifique a autenticidade
        do servidor e do cliente por meio de certificados digitais.
        <a href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">Wikipédia</a>
    </p>
</details>

1


You are clicking on <summary> 'cause just like you said, he’s in front of the <details>.

To confirm this, I changed the code so that when clicking somewhere on the page, it informed the tag name of the element I am clicking.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Exemplo</title>
    <script>
        function show(){
            alert(document.activeElement.tagName);
        }
    </script>
</head>
<body onclick="show()">
    <details>
        <summary>O que é HTTPS?</summary>
        <p>
            HTTPS é uma implementação do protocolo HTTP sobre uma camada adicional de segurança
            que utiliza o protocolo SSL/TLS. Essa camada adicional permite que os dados sejam
            transmitidos por meio de uma conexão criptografada e que se verifique a autenticidade
            do servidor e do cliente por meio de certificados digitais.
            <a href="https://en.wikipedia.org/wiki/HTTPS" target="_blank">Wikipédia</a>
        </p>
    </details>
<body>
</html>

By clicking on the element, it emits an alert stating that the active element is the SUMMARY. But when removing the tag <summary> there will be no other element in front of the <details>, thus, he will inform DETAILS.

  • I still don’t understand, in the case of your code when the details is opened is returned SUMMARY, but clicking on the already opened content is returned BODY being that I’m clicking on details.

  • 1

    @joãobatista just read about Document.activeElement, if you do not seek to understand the basics of DOM ai vc gets lost even, the activeElement is a reference to the elements that can receive pointer focus, such as buttons, text fields and links (and Summary itself). Just by clicking on another area only returns BODY because other elements are not "focusable", there only remains the default focus when you click on something that does not accept focus, the default is BODY. Anyway Jean’s answer was to explain that yes, you click on Summary and not DETAILS.

  • It was bad guy, is that I’m starting in these businesses and do not understand very well how it works things.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.