document.click() on a document

Question

DOM button is getting clicked with .click() method, but its not working on document itself.

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
document.clicked()

<button id="btn">Click Me!</button>

Please help.

Solution 1

document objects are not things that can be clicked on.

Event handlers can be bound to a document, and events will bubble until they reach the document and trigger a handler, but you can't click directly on the document.

Solution 2

document.getElementById('btn') this id is not found in the document, So please add the element id and remove document.clicked() because its not a function on document object.

Here you may please check the working code snippet.

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
//document.clicked()

<button id="btn">Click Me!</button>

Solution 3

As Quentin already explains in his answer, a document object cannot be clicked upon.

Event handlers associated on document execute due to the events bubbling up the DOM. For example, a click event on the button in your snippet traverses the button -> then body -> then document.

So, as an alternative to document.clicked() you attempt in your question, you can trigger the event on body element via, document.body.click().

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
document.body.click()

<button id="btn">Click Me!</button>

You can read more about event bubbling here: What is event bubbling and capturing?

---

Note: I have added ID attribute to the button in your snippet to ensure that it runs.

Comments

[Jai]

document.getElementById('btn'); this id is not found in the document.

[Quentin]

Your attempt at providing a minimal reproducible example demonstrates a number of problems which have nothing to do with the question you are asking. Please test your MCVEs to make sure they are a suitable demonstration of the actual problem you are having.

[luk2302]

Adding an entire library for the sake of a simple button click is very much discouraged.

[Rizvan]

@luk2302 Hi might be already using this, in his project, so its not being added for the sake of a button click, so this is just a possible answer to this question.

[luk2302]

No, this is not a proper answer. If you suspect OP is using jQuery ask for assurance in a comment, don't just post an answer assuming that he is. Shall I post an answer that enables click listeners for EVERY js library I know?

[Rizvan]

@luk2302 should I remove this answer then?