JavaScript autoclick child node element

I've been endlessly looking for a working way to automate a mouse click on a specific element using javascript (I'm making a user-script). The structure is like the below:

<div id="elementContainer">
  <div class="item1" style="width: 50px; height: 50px;">AutoClick Here!</div>
</div>

item1 is the thing I want to automate a click on. I've tried lots of approaches, e.g. getting t开发者_JAVA技巧he element and creating/initialising/dispatching a 'click' event on it, calling .click() on it etc, but to be honest I'm new to javascript and don't hugely know what I'm doing!

I can happily get the element and make changes to it (like changing the innerHTML), but want to be able to simulate/automate a click on it too. I would be very grateful for any advice on how to proceed.

Many thanks in advance!

Calling .click() on the element should work just fine.

var container = document.getElementById('elementContainer'),
    innerDiv = container.getElementsByClassName('item1');
    
innerDiv.click();

That said:

The click method is intended to be used with INPUT elements of type button, checkbox, radio, reset or submit. Gecko does not implement the click method on other elements that might be expected to respond to mouse–clicks such as links (A elements), nor will it necessarily fire the click event of other elements.

Non–Gecko DOMs may behave differently.

When a click is used with elements that support it (e.g. one of the INPUT types listed above), it also fires the element's click event which will bubble up to elements higher up the document tree (or event chain) and fire their click events too. However, bubbling of a click event will not cause an A element to initiate navigation as if a real mouse-click had been received.

Have you bound any click event handlers to that <div>?

Read this: http://www.howtocreate.co.uk/tutorials/javascript/domevents